You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.7 KiB
1.7 KiB
#### 步骤切换
通常配合内容及按钮使用，表示一个流程的处理进度。
#### Switch Step
Cooperate with the content and buttons, to represent the progress of a process.
<template>
<div>
<a-steps :current="current">
<a-step v-for="item in steps" :key="item.title" :title="item.title" />
</a-steps>
<div class="steps-content">{{steps[current].content}}</div>
<div class="steps-action">
<a-button v-if="current < steps.length - 1" type="primary" @click="next">
Next
</a-button>
<a-button
v-if="current == steps.length - 1"
type="primary"
@click="$message.success('Processing complete!')"
>
Done
</a-button>
<a-button v-if="current>0" style="margin-left: 8px" @click="prev">
Previous
</a-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
current: 0,
steps: [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
],
};
},
methods: {
next() {
this.current++;
},
prev() {
this.current--;
},
},
};
</script>
<style scoped>
.steps-content {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 80px;
}
.steps-action {
margin-top: 24px;
}
</style>