vue实现流程页面
Vue 实现流程页面
数据驱动设计
使用 Vue 的响应式特性管理流程状态，通过 v-for 渲染步骤节点。典型数据结构如下：
data() {
return {
steps: [
{ id: 1, title: '步骤1', status: 'completed' },
{ id: 2, title: '步骤2', status: 'active' },
{ id: 3, title: '步骤3', status: 'pending' }
],
currentStep: 2
}
}动态样式绑定
结合 :class 实现状态可视化：
<div v-for="step in steps" :key="step.id"
:class="['step-node', step.status]">
<div class="step-indicator">{{ step.id }}</div>
<div class="step-title">{{ step.title }}</div>
</div>CSS 示例：
.step-node.completed .step-indicator {
background-color: #4CAF50;
}
.step-node.active .step-indicator {
border: 2px solid #2196F3;
}连接线处理
使用伪元素创建节点间的连接线：
.step-node:not(:last-child)::after {
content: '';
position: absolute;
top: 24px;
left: 100%;
width: calc(100% - 40px);
height: 2px;
background: #e0e0e0;
}
.step-node.completed::after {
background: #4CAF50;
}交互控制
添加步骤切换功能：
<button @click="prevStep" :disabled="currentStep <= 1">上一步</button>
<button @click="nextStep" :disabled="currentStep >= steps.length">下一步</button>方法实现：
methods: {
nextStep() {
if (this.currentStep < this.steps.length) {
this.updateStepStatus(this.currentStep, 'completed')
this.currentStep++
this.updateStepStatus(this.currentStep, 'active')
}
},
updateStepStatus(stepIndex, status) {
this.steps[stepIndex - 1].status = status
}
}响应式布局
通过 CSS Grid 适应不同屏幕：
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}动画效果
添加过渡动画提升体验：
.step-indicator {
transition: all 0.3s ease;
}
.step-node.active .step-indicator {
transform: scale(1.1);
}状态持久化
结合 Vuex 或 localStorage 保存流程状态：
watch: {
currentStep(newVal) {
localStorage.setItem('currentStep', newVal)
}
},
created() {
const savedStep = localStorage.getItem('currentStep')
if (savedStep) this.currentStep = parseInt(savedStep)
}
