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