說明
【Vue 開發實戰】學習筆記。
效果
第一步:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5yM3gTOzQDMmRDOlNjMzczMzYzX2ITNxIDMxAzLcBTMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
第二步:填寫密碼送出
第三步:成功提示
添加 vuex
建立
ant-design-vue-pro\src\store\modules\form.js
import router from "@/router";
import request from "@/utils/request"
import { message } from "ant-design-vue";
const state = {
step: {
payAccount: "kaimo313"
}
}
const actions = {
async submitStepForm({ commit }, { payload }) {
console.log("submitStepForm--->", ...arguments)
let res = await request({
url: "/api/form",
method: "post",
data: payload
});
if(res.data && res.data.message === "OK") {
console.log("res--->", res)
commit("saveStepFormData", payload);
router.push("/form/step-form/result");
message.success({
content: "送出成功"
});
}
}
}
const mutations = {
saveStepFormData(state, { payload }) {
state.step = {
...state.step,
...payload
}
}
}
export default {
namespaced: true,
state,
actions,
mutations
}
import Vue from "vue";
import Vuex from "vuex";
import form from "./modules/form";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {
form,
},
});
添加 mock form的送出接口
function form(method) {
let res = null;
switch (method) {
case "POST":
res = { message: "OK" };
break;
default:
res = null;
}
return res;
}
module.exports = form;
Step1 元件
<template>
<div>
<a-form layout="horizontal" :form="form">
<a-form-item
label="付款賬号"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
>
<a-input v-decorator="[
'payAccount',
{
initialValue: step.payAccount,
rules: [
{
required: true,
message: '請輸入付款賬号'
}
]
},
]" placeholder="請輸入付款賬号" />
</a-form-item>
<a-form-item>
<a-button type="primary" @click="handleSubmit">下一步</a-button>
</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() {
return this.$store.state.form.step
}
},
created() {
console.log("this.$store---->", this.$store)
},
methods: {
handleSubmit() {
const { form, $router, $store} = this;
form.validateFields((err,) => {
console.log(err, values)
if(!err) {
console.log(values);
$store.commit({
type: "form/saveStepFormData",
payload: values
});
$router.push("/form/step-form/confirm");
}
})
}
},
};</script>
<style></style>
Step2 元件
<template>
<div>
<a-form layout="horizontal" :form="form">
<a-form-item
label="付款賬号"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
>
{{step.payAccount}}
</a-form-item>
<a-form-item
label="賬号密碼"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
>
<a-input v-decorator="[
'password',
{
initialValue: password,
rules: [
{
required: true,
message: '請輸入賬号密碼'
}
]
},
]"
type="password"
placeholder="請輸入賬号密碼" />
</a-form-item>
<a-form-item>
<a-button @click="goPrev" style="margin-right: 10px;">上一步</a-button>
<a-button type="primary" @click="handleSubmit">送出</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>export default {
data() {
this.form = this.$form.createForm(this);
return {
password: "",
formItemLayout:{
labelCol: { span: 4 },
wrapperCol: { span: 14 },
}
};
},
computed: {
step() {
return this.$store.state.form.step
}
},
created() {
console.log("this.$store---->", this.$store)
},
methods: {
goPrev() {
this.$router.push("/form/step-form/info");
},
handleSubmit() {
const { form, $store, step } = this;
form.validateFields((err,) => {
console.log(err, values)
if(!err) {
console.log(values);
// 以載荷形式分發
$store.dispatch("form/submitStepForm", {
payload: { ...step, ...values }
});
// 以對象形式分發
// $store.dispatch({
// type: "form/submitStepForm",
// payload: { ...step, ...values }
// });
}
})
}
},
};</script>
<style></style>
Step3 元件
<template>
<div>操作成功,預計兩個小時到賬。</div>
</template>
<script>export default {};</script>
<style></style>