自定義一個TabBar元件：

<template>
  <div class="tab-bar">
    <div v-for="(item,index) in tabList" :key="index" :class="['common',{active:currentIndex===index}]" @click="currentIndex=index">{{item}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return
 
 {
      tabList: ['專案一', '專案二', '專案三'],
      currentIndex: 0
    }
  }
}
</script>
<style lang='less' scoped>
.tab-bar {
  display: flex;
  .common {
    width: 100px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #000;
    cursor: pointer;
  }
  .active {
    background-color
 
: red;
  }
}
</style>

通過動態繫結類名（active）實現點選高亮。

封裝成指令：

1、src/directives/navActive.js：

export default {
  bind: (el, binding) => {
    // 設定初始化高亮類名
    const { className, activeClass, currentIndex } = binding.value
    const children = el.getElementsByClassName(className)
    children[currentIndex].className 
 
+= ` ${activeClass}`
  },
  update: (el, binding) => {
    // 設定被點選tab的高亮類名，並清除之前的tab的高亮類名
    const { className, activeClass, currentIndex } = binding.value
    const children = el.getElementsByClassName(className)
    children[currentIndex].className += ` ${activeClass}`
    const { currentIndex: oldIndex } = binding.oldValue
    children[oldIndex].className = className
  }
}

2、使用

　　引入指令並註冊指令：

import NavActive from '@/directives/navActive'

  directives: { NavActive }

　　使用指令，並傳入對應的引數給指令：（class只需要寫common就行了）

  <div class="tab-bar" v-NavActive="{className:'common',activeClass:'active',currentIndex}">
    <div v-for="(item,index) in tabList" :key="index" class='common' @click="currentIndex=index">{{item}}</div>
  </div>