vue实现流程高亮

Vue 实现流程高亮的方法

使用动态类绑定

通过 Vue 的 v-bind:class 或简写 :class 动态绑定类名，根据当前步骤激活高亮样式。定义一个数据属性（如 currentStep）记录当前步骤，结合 CSS 实现高亮效果。

<template>
  <div>
    <div 
      v-for="(step, index) in steps" 
      :key="index" 
      :class="{ 'active-step': index === currentStep }"
    >
      {{ step }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: ['步骤1', '步骤2', '步骤3'],
      currentStep: 0
    };
  }
};
</script>

<style>
.active-step {
  color: #42b983;
  font-weight: bold;
}
</style>

结合 Vue Router 实现路由高亮

若流程与路由关联，可通过 Vue Router 的 router-link 和 active-class 属性实现导航高亮。

<template>
  <div>
    <router-link 
      v-for="(route, index) in routes" 
      :key="index" 
      :to="route.path"
      active-class="active-route"
    >
      {{ route.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routes: [
        { path: '/step1', name: '步骤1' },
        { path: '/step2', name: '步骤2' }
      ]
    };
  }
};
</script>

<style>
.active-route {
  border-bottom: 2px solid #42b983;
}
</style>

使用第三方库

借助 vue-step-wizard 等库快速实现流程高亮。安装后直接使用组件，内置高亮逻辑。

npm install vue-step-wizard

<template>
  <step-wizard>
    <step>步骤1</step>
    <step>步骤2</step>
  </step-wizard>
</template>

<script>
import { StepWizard, Step } from 'vue-step-wizard';
export default {
  components: { StepWizard, Step }
};
</script>

自定义组件封装

封装可复用的流程组件，通过插槽和 props 控制高亮逻辑。

<template>
  <div class="process-container">
    <slot :current="currentStep"></slot>
  </div>
</template>

<script>
export default {
  props: {
    currentStep: { type: Number, default: 0 }
  }
};
</script>

调用时通过作用域插槽获取当前步骤状态：

<process-container :current-step="1">
  <template v-slot="{ current }">
    <div :class="{ 'highlight': current === 0 }">步骤1</div>
    <div :class="{ 'highlight': current === 1 }">步骤2</div>
  </template>
</process-container>

动画过渡效果

通过 Vue 的 <transition> 组件为高亮切换添加动画，增强用户体验。

<transition name="fade">
  <div v-if="isActive" class="highlight-step">当前步骤</div>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.highlight-step {
  background-color: #e3f2fd;
}
</style>