vue自定义指令

自定义指令在开发过程中会用到 官方文档也有介绍这里
这里就展示一个自定义指令的使用
还是以切换选项卡来展示

原来的切换是这么写的

<div
        v-for="(item,index) in items"
        :key="index"
        @click="changeIndex(index)"
        :class="['nav-item',{'nav-active': index == currentIndex}]"
      >{{item}}</div>

items: ["项目1", "项目2", "项目3"],
      currentIndex: 0,

接着引用自定义指令

import index from "./index";
// 注册指令
  directives: {
    index,
  },

这里是index.js文件的代码

export default {
    bind: function (el, binding) {
        const options = binding.value
        const {
            className,
            activeClassName,
            currentIndex
        } = options
        const children = el.getElementsByClassName(className)
        console.log(children)
        children[currentIndex].className += ` ${activeClassName}`
    },
    update: function (el, binding) {
        const options = binding.value

        const oldOptions = binding.oldValue
        const {
            className,
            activeClassName,
            currentIndex
        } = options
        const children = el.getElementsByClassName(className)
        const {
            currentIndex: oldCurrentIndex
        } = oldOptions
        children[currentIndex].className += ` ${activeClassName}`
        children[oldCurrentIndex].className = className
    }
}

于是就可以这么写

    <div
      v-index="{
      className: 'nav-item',
      activeClassName: 'nav-active',
      currentIndex
    }"
    >
      <div
        v-for="(item,index) in items"
        :key="index"
        @click="changeIndex(index)"
        class="nav-item"
      >{{item}}</div>
    </div>

这样就完成了自定义指令 v-index
这样做的好处是 代码有了更高的复用性 之后别的文件需要这个切换方法只需引用 绑定好className 就可以实现切换效果
代码很简单主要是自己记录一下自定义指令的使用