当前位置：首页 > VUE

vue实现流程高亮

2026-01-19 20:21:31VUE

Vue 实现流程高亮的方法

使用动态类绑定

通过 v-bind:class 或简写 :class 动态绑定高亮样式，结合条件判断当前步骤是否激活。

<template>
  <div class="step" :class="{ 'active': currentStep >= 1 }">步骤1</div>
  <div class="step" :class="{ 'active': currentStep >= 2 }">步骤2</div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1 // 当前步骤
    };
  }
};
</script>

<style>
.step {
  color: #999;
}
.step.active {
  color: #42b983; /* 高亮颜色 */
  font-weight: bold;
}
</style>

基于状态管理

若流程步骤跨组件，可通过 Vuex 或 Pinia 管理当前步骤状态，实现全局高亮同步。

// store.js (Vuex 示例)
export default new Vuex.Store({
  state: {
    currentStep: 1
  },
  mutations: {
    setStep(state, step) {
      state.currentStep = step;
    }
  }
});

// 组件中使用
<template>
  <div :class="{ 'active': $store.state.currentStep >= 1 }">步骤1</div>
</template>

结合动画效果

通过 Vue 的过渡动画增强高亮交互体验。

<template>
  <transition name="fade">
    <div v-if="isStepActive(1)" class="step">步骤1</div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方库

集成专用流程库如 vue-step-wizard 快速实现高亮流程。

npm install vue-step-wizard

<template>
  <vue-step-wizard :active-step="currentStep">
    <step title="步骤1"></step>
    <step title="步骤2"></step>
  </vue-step-wizard>
</template>

响应式设计

通过计算属性动态控制高亮逻辑，适应复杂条件。

computed: {
  stepClasses() {
    return {
      'step-1': this.currentStep === 1,
      'step-2': this.currentStep === 2,
      'completed': this.currentStep > this.stepIndex
    };
  }
}

以上方法可根据实际需求组合使用，灵活适配不同场景的流程高亮需求。

vue实现流程高亮