demand

The original multiple module forms are entered on the same page at one time. Now we need to change the same page to multi-step multi-page for presentation and interaction. Here is the main record of the multi-step verification function of the logic.

Page structure before modification

The modified page structure

Code implementation analysis

The original page structure is divided into multiple forms and packaged into components

<div v-show="step === 1">
  <first-form ref="firstForm"/>
</div>
<div v-show="step ===  2">
  <second-form ref="secondForm" />
</div>
<div v-show="step === 3">
  <third-form ref="thirdForm" />
</div>
Copy the code

Each step carries on the component encapsulation, and the component interiorel-formthevalidateMethod for secondary encapsulation

<template> <section class="first-form"> <el-form label-width="190px" :rules="rules" :model="ruleForm" @subsubmit. Native. Prevent > <el-form-item prop="field1" label=" field1" > <el-input V-model. </el-form-item> <el-form-item prop="field2" label=" fiel2 "> <el-input V-model =" ruleform. field2" /> </el-form-item> </el-form> </section> </template> <script> export default { data() { return { ruleForm: { field1: '', field2: ',}, rules: {field1: [{required: true, this.editFlag,message: 'please input ',trigger: 'change'}],},}}, methods: { validate() { return new Promise(res => { this.$refs.ruleForm.validate(async valid => res(valid)) }) }, } } </script>Copy the code

For now, take step 1 as an example

Method encapsulation for each step

async checkFirstStep() { try { if (! (await this.$refs.firstform.validate ())) await this.checkfail (' await this. ')} catch (e) {return promise.reject (1)}}, async checkSecondStep() {try {if (! (await this.$refs.secondform.validate ())) await this.checkfail (' Await this. ') } catch (e) { return Promise.reject(2) } } async checkThirdStep() { try { if (! (await this.$refs.thirdform.validate ())) await this.checkfail (' Error! ')} catch (e) {return promise.reject (3)}} async checkFail(message) {if (message) this.$message.error(message) return Promise.reject() }Copy the code

const p = Promise.reject(3); // const p = new Promise((resolve, reject) => reject(3)) es6.ruanyifeng.com/#docs/promi…

[Next step] Click the verification logic button

async nextStep() { try { switch (this.step) { case 1: await this.checkFirstStep() break case 2: await this.checkSecondStep() break case 3: Await this.setNextPageData() break} this.step++} catch (e) {await this.setNextPageData() break} this.step++} catch (e) { console.error(e) } },Copy the code

[Create] Button function realization

Async confirmTap() {try {// each step starts checking await this.checkFirstStep() await this.checksecondstep () await This.checkthirdstep ()} catch (e) {if (typeof e ! == 'number') return this.step = e}},Copy the code
  • The checkXxxxStep method encapsulates a reject when the check fails, and reject throws the current step
  • Await inside the method to determine whether the validation is correct
  • If an error catch is used to make a specific jump