60 lines
1.6 KiB
Plaintext
60 lines
1.6 KiB
Plaintext
<template>
|
|
<div>
|
|
<div class="n-layout-page-header">
|
|
<a-card :bordered="false" title="分步表单">
|
|
将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
|
|
</a-card>
|
|
</div>
|
|
<a-card :bordered="false" class="mt-4 proCard">
|
|
<div class="steps step-form">
|
|
<a-steps :current="currentTab" :status="currentStatus">
|
|
<a-step title="填写转账信息" description="确保填写正确" />
|
|
<a-step title="确认转账信息" description="确认转账信息" />
|
|
<a-step title="完成转账" description="恭喜您，转账成功" />
|
|
</a-steps>
|
|
<step1 v-if="currentTab === 0" @next-step="nextStep" />
|
|
<step2 v-if="currentTab === 1" @next-step="nextStep" @prev-step="prevStep" />
|
|
<step3 v-if="currentTab === 2" @next-step="prevStep" @finish="finish" />
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import step1 from './Step1.vue';
|
|
import step2 from './Step2.vue';
|
|
import step3 from './Step3.vue';
|
|
|
|
const currentTab = ref(0);
|
|
const currentStatus = ref('process');
|
|
|
|
function nextStep() {
|
|
if (currentTab.value < 2) {
|
|
currentTab.value += 1;
|
|
}
|
|
}
|
|
|
|
function prevStep() {
|
|
if (currentTab.value > 0) {
|
|
currentTab.value -= 1;
|
|
}
|
|
}
|
|
|
|
function finish() {
|
|
currentTab.value = 0;
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.steps {
|
|
max-width: 750px;
|
|
margin: 16px auto;
|
|
}
|
|
.step-form {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
}
|
|
</style>
|