Step by step form and custom form controls
Combined with the contents of previously learned. Here three step route to achieve.
First create a store of the module. We need to save the data, and then introduced into the store in the index.js
form.js
1 import router from "../../router"; 2 import request from "../../utils/request"; 3 import { notification } from "ant-design-vue"; 4 5 const state = { 6 step: { 7 payAccount: "12345", 8 receiverAccount: { 9 type: "bank", 10 number: "" 11 } 12 } 13 }; 14 15 const actions = { 16 async submitStepForm({ commit }, payload) { 17 if (payload.payload.password == 123123) { 18 let res = await request({ 19 url: "api/form", 20 method: "POST", 21 data: payload.payload 22 }); 23 if (res.data.message == "成功") { 24 commit("saveStepFormData", payload); 25 router.push("/form/step-from/result"); 26 } 27 } else { 28 notification.error({ 29 message: "wrong password" 30 }); 31 } 32 } 33 }; 34 35 const mutations = { 36 saveStepFormData(state, { payload }) { 37 state.step = { 38 ...state.step, 39 ...payload 40 }; 41 } 42 }; 43 export default { 44 namespaced: true, 45 state, 46 actions, 47 mutations 48 };
js function of analog data before a request is used herein.
function form(method) { let res = null; switch (method) { case "POST": res = { message: "成功" }; break; default: res = null; } return res; } module.exports = form;
The first step in writing
<template>
<div>
<a-form layout="horizontal" :form="form">
<a-form-item>
<a-form-item
label="付款账户"
:label-col="formItemLayout.labelCol"
:wrapperCol="formItemLayout.wrapperCol"
>
<a-input
v-decorator="['payAccount',{
initialValue:step.payAccount,
rules:[
{required:true,message:'请输入付款账户'}
]
}]"
</ Item-A-form>= "Please enter Content"
placeholder
/>
<a-form-item
label="收款账户"
:label-col="formItemLayout.labelCol"
:wrapperCol="formItemLayout.wrapperCol"
>
<ReceiverAccount
v-decorator="['receiverAccount',{
initialValue:step.receiverAccount,
rules:[
{required:true,message:'请输入收款账户',
validator: (rule,value,callback) => {
if(value && value.number){
callback()
} else {
callback(false)
}
}}
]
}]"
placeholder="请输入内容"
/>
</a-form-item>
<a-form-item>
<a-button type="primary" @click="handleSubmit">下一步</a-button>
</a-form-item>
</a-form-item>
</a-form>
</div>
</template>
<script>
import ReceiverAccount from "@/components/ReceiverAccount";
export default {
data() {
this.form = this.$form.createForm(this);
return {
formItemLayout: {
labelCol: { span: 4 },
wrapperCol: { span: 14 }
}
};
},
components: {
ReceiverAccount
},
computed: {
step() {
return this.$store.state.form.step;
}
},
methods: {
handleSubmit() {
const { form, $router, $store } = this;
form.validateFields((err, values) => {
if (!err) {
$store.commit({
type: "form/saveStepFormData",
payload: values
});
$router.push("/form/step-from/comfirm");
}
});
}
}
};
</script>
<style></style>
The second step
<template>
<div>
<a-form layout="horizontal" :form="form">
<a-form-item>
<a-form-item
label="付款账户"
:label-col="formItemLayout.labelCol"
:wrapperCol="formItemLayout.wrapperCol"
>{{step.payAccount}}</a-form-item>
<a-form-item
label="收款账户"
:label-col="formItemLayout.labelCol"
:wrapperCol="formItemLayout.wrapperCol"
>
<span style="color:#a12221">{{Step.receiverAccount.type == 'alipay' 'Alipay':? 'Bank card'}} </ span>
<span>: step.receiverAccount.number {{}} </ span>
label = "Password"
: label -col = "formItemLayout.labelCol"
: wrapperCol = "formItemLayout.wrapperCol"
>
<A- INPUT
type = "password "
V -decorator =" [ 'password', {
the rules: [
{required: to true, Message: 'enter a payment account password'}
]
}] "
placeholder =" Please enter content "
/>
</ form-A-Item >
<a-form-item>
</a-form-item>
<a-form-item
<A-Button style =" margin-right: 15px "type =" dashed "@ click ="handleBack "> Back </ a-button>
<a-button type="primary" @click="handleSubmit">提交</a-button>
</a-form-item>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
data() {
this.form = this.$form.createForm(this);
return {
formItemLayout: {
labelCol: { span: 4 },
wrapperCol: { span: 14 }
}
};
},
computed: {
step() {
console.log(this.$store.state.form.step);
return this.$store.state.form.step;
}
},
methods: {
handleSubmit() {
const { form, $store, step } = this;
form.validateFields((err, values) => {
if (!err) {
$store.dispatch({
type: "form/submitStepForm",
payload: { ...step, ...values }
});
}
});
},
handleBack() {
this.$router.push("/form/step-from/info");
}
}
};
</script>
<style></style>
third step
<Template>
<div>
successful <h3> operation, two hours expected arrival </ H3>
<div> {} {} after Time Sec Home </ div>
</ div>
</ Template>
<Script >
Export default {
Data () {
return {
Time: . 3
};
},
Mounted () {
var Timer = the setInterval (() => {
the this .time-- ;
IF ( the this .time <= 0 ) {
the clearInterval (Timer );
the this . $ router.replace ( "/ form / STEP-from / info" );
}
}, 1000 );
}
};
</script>
<style></style>
Renderings:
In the first step, there is a custom to use the assembly is inserted into the form, the form and use of automatic calibration. In antd's official website, there are related interpretations.
Custom or third-party form controls, can also be used with Form components. As long as the assembly the following convention:
- Provide a controlled property
valueor the othervaluePropName- attribute parameter) value of the same name. - Provide
onChangeevent ortriggerincident parameters) of the same name value -. - It can not be a functional component.
Source components
<template>
<div>
<a-input-group compact>
<a-select v-model="type" style="width :130px" @change="handleTypeChange">
<a-select-option value="alipay">支付宝</a-select-option>
<a-select-option value="bank">银行卡</a-select-option>
</a-select>
<a-input
v-model="number"
style="width: calc(100% - 130px)"
@change="handleInputChange"
placeholder="请输入账户"
/>
</a-input-group>
</div>
</template>
<script>
export default {
props: {
value: {
type: Object
}
},
data() {
const { type, number } = this.value || {};
return {
type: type || "alipay",
number: number || ""
};
},
watch: {
value(val) {
Object.assign(this, val);
}
},
methods: {
handleTypeChange(val) {
this.$emit("change", { ...this.value, type: val });
},
handleInputChange(e) {
this.$emit("change", { ...this.value, number: e.target.value });
}
}
};
</script>
<style>
</style>