1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| <template>
| <PageWrapper
| title="分步表单"
| contentBackground
| content=" 将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
| contentClass="p-4"
| >
| <div class="step-form-form">
| <a-steps :current="current">
| <a-step title="填写转账信息" />
| <a-step title="确认转账信息" />
| <a-step title="完成" />
| </a-steps>
| </div>
| <div class="mt-5">
| <Step1 @next="handleStep1Next" v-show="current === 0" />
| <Step2
| @prev="handleStepPrev"
| @next="handleStep2Next"
| v-show="current === 1"
| v-if="initSetp2"
| />
| <Step3 v-show="current === 2" @redo="handleRedo" v-if="initSetp3" />
| </div>
| </PageWrapper>
| </template>
| <script lang="ts">
| import { defineComponent, ref, reactive, toRefs } from 'vue';
| import Step1 from './Step1.vue';
| import Step2 from './Step2.vue';
| import Step3 from './Step3.vue';
| import { PageWrapper } from '/@/components/Page';
| import { Steps } from 'ant-design-vue';
|
| export default defineComponent({
| name: 'FormStepPage',
| components: {
| Step1,
| Step2,
| Step3,
| PageWrapper,
| [Steps.name]: Steps,
| [Steps.Step.name]: Steps.Step,
| },
| setup() {
| const current = ref(0);
|
| const state = reactive({
| initSetp2: false,
| initSetp3: false,
| });
|
| function handleStep1Next(step1Values: any) {
| current.value++;
| state.initSetp2 = true;
| console.log(step1Values);
| }
|
| function handleStepPrev() {
| current.value--;
| }
|
| function handleStep2Next(step2Values: any) {
| current.value++;
| state.initSetp3 = true;
| console.log(step2Values);
| }
|
| function handleRedo() {
| current.value = 0;
| state.initSetp2 = false;
| state.initSetp3 = false;
| }
|
| return {
| current,
| handleStep1Next,
| handleStep2Next,
| handleRedo,
| handleStepPrev,
| ...toRefs(state),
| };
| },
| });
| </script>
| <style lang="less" scoped>
| .step-form-content {
| padding: 24px;
| background-color: @component-background;
| }
|
| .step-form-form {
| width: 750px;
| margin: 0 auto;
| }
| </style>
|
|
