自定义指令实现tabs切换颜色高亮

---

前言

说明：
学过Vue的小伙伴们应该都知道，Vue不仅提供了v-if、v-for、v-show 、v-model等指令来方便操作数据和页面的交互，也给提供了自定义指令让我们可以自己定义需要的指令。

vue中文官网自定义指令

使用Vue自定义指令来实现tabs切换颜色高亮显示，加深对自定义指令的掌握

一、home.vue

<template>
  <div class="home">
    <div class="nav-tads"
        v-nav-current = "{
          curIdx,					// 当前选中的tab索引
          className: 'nav-item',	// tab的默认class
          activeClass: 'nav-active' // tab选中时的active class
         }"
      >
      <div v-for="(item,idx) in list"
           class="nav-item"
           :key="idx"
           @click="handleTabChange(idx)"
      >
        {{item}}
      </div>
    </div>

  </div>
</template>

<script>
import navCurrent from "../directive/navCurrent";
export default {
  name: 'Home',
  // 注册自定义指令
  directives: {
    navCurrent,
  },
  data(){
    return {
      list:['tabs1','tabs2','tabs3','tabs4'],
      curIdx: 0,  // 选中的tab索引
    }
  },
  methods:{
    // tab切换事件
    handleTabChange(idx){
      this.curIdx  = idx
    }
  }
}
</script>
<style scoped>
.nav-tads{
  margin-top: 200px;
  display: flex;
}
.nav-item{
  width: 100px;
  height: 50px;
  border: 2px solid #42b983;
  text-align: center;
  line-height: 50px;
}
// 选中的样式
.nav-active{
  background-color: greenyellow;
}
</style>

二、navCurrent.js

export default {
    bind(el, binding, vnode) {
        const _ops = binding.value
        const _c = el.getElementsByClassName(_ops.className)
        _c[_ops.curIdx].className += ` ${_ops.activeClass}`
    },
    update(el, binding, vnode) {
        const _ops = binding.value,
              _oldOps = binding.oldValue,
              _c = el.getElementsByClassName(_ops.className)
        _c[_oldOps.curIdx].className = `${_oldOps.className}`
        _c[_ops.curIdx].className += ` ${_ops.activeClass}`
    },
}