vue步骤条如何实现
实现 Vue 步骤条的方法
使用 el-steps 组件（Element UI）
安装 Element UI 后，可以直接使用 el-steps 组件实现步骤条。以下是一个基本示例：
<template>
<el-steps :active="active" finish-status="success">
<el-step title="步骤1"></el-step>
<el-step title="步骤2"></el-step>
<el-step title="步骤3"></el-step>
</el-steps>
</template>
<script>
export default {
data() {
return {
active: 1
}
}
}
</script>自定义步骤条样式
可以通过 CSS 覆盖默认样式来自定义步骤条的外观：
.el-step__head.is-process {
color: #409EFF;
border-color: #409EFF;
}
.el-step__title.is-process {
font-weight: bold;
}使用 Vuetify 的步骤组件
如果使用 Vuetify，可以通过 v-stepper 组件实现：
<template>
<v-stepper v-model="e1">
<v-stepper-header>
<v-stepper-step :complete="e1 > 1" step="1">第一步</v-stepper-step>
<v-stepper-step :complete="e1 > 2" step="2">第二步</v-stepper-step>
<v-stepper-step step="3">第三步</v-stepper-step>
</v-stepper-header>
</v-stepper>
</template>
<script>
export default {
data() {
return {
e1: 1
}
}
}
</script>纯 Vue 实现步骤条
不使用 UI 框架时，可以手动实现：
<template>
<div class="steps">
<div
v-for="(step, index) in steps"
:key="index"
:class="['step', { 'active': currentStep === index, 'completed': currentStep > index }]"
@click="setStep(index)"
>
{{ step.title }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentStep: 0,
steps: [
{ title: '第一步' },
{ title: '第二步' },
{ title: '第三步' }
]
}
},
methods: {
setStep(index) {
this.currentStep = index
}
}
}
</script>
<style>
.steps {
display: flex;
justify-content: space-between;
}
.step {
padding: 10px;
cursor: pointer;
}
.step.active {
color: blue;
font-weight: bold;
}
.step.completed {
color: green;
}
</style>响应式步骤条
可以通过计算属性动态调整步骤条：
computed: {
progressPercentage() {
return ((this.currentStep + 1) / this.steps.length) * 100
}
}然后在模板中使用：
<div class="progress-bar">
<div class="progress" :style="{ width: progressPercentage + '%' }"></div>
</div>步骤条与路由结合
将步骤条与 Vue Router 结合：
{
path: '/step1',
component: Step1,
meta: { step: 0 }
},
{
path: '/step2',
component: Step2,
meta: { step: 1 }
}在步骤条组件中：
computed: {
currentStep() {
return this.$route.meta.step || 0
}
}
