当前位置：首页 > VUE

vue实现流程页面

2026-02-20 12:00:55VUE

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 保存流程状态：

vue实现流程页面

watch: {
  currentStep(newVal) {
    localStorage.setItem('currentStep', newVal)
  }
},
created() {
  const savedStep = localStorage.getItem('currentStep')
  if (savedStep) this.currentStep = parseInt(savedStep)
}