vue自定义指令之激活指令（v-active-style）

前提

Vue2中的指令钩子

bind()：当指令绑定在 HTML 元素上时触发
inserted()：当指令绑定的元素插入到父节点中的时候触发
update()：当指令绑定的元素状态/样式、内容(这里指元素绑定的 vue 数据) 发生改变时触发
componentUpdated()：当 update() 执行完毕之后触发
unbind()：当指令绑定的元素从 dom 中删除时触发

Vue3中指令钩子

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。
beforeUpdate：在更新包含组件的 VNode 之前调用。
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

自定义指令参数

el：指令绑定到的元素。这可以用于直接操作 DOM。
binding：一个对象，包含以下属性：
        value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
        oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
        arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
        modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
        dir：指令的定义对象。
        instance：使用该指令的组件实例。
vnode：代表绑定元素的底层 VNode。
prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

v-active-style指令
用法：接受一个伪数组，数组第一项为：样式，第二项为：激活依据，可以是一个方法（必须返回boolean值，或者一个表达式）

  <ul>
    <li v-for="item in 10" :key="item"
        v-active-style="[{color: 'red', background: 'green'}, () => item === currentIndex]"
        @click="clickNode(item)"
    >{{item}}</li>
  </ul>

activeStyle.js

export default {
    name: 'activeStyle',
    bind(el, {value}) {
        activeStyleCommon(el, value);
    },
    update(el, {value}) {
        activeStyleCommon(el, value);
    }
}

function activeStyleCommon(el, value) {
    if (!Array.isArray(value)) {
        return new Error('属性值必须为数组！')
    }
    let style = value[0];
    let fn = value[1];
    let flag = typeof fn === 'function' ? fn() : fn;
    for (let item in style) {
        el.style[item] = flag ? style[item] : '';
    }
}

全局引入
index.js

let directList = require.context('./module', false, /\.js$/);
export default {
    install(Vue) {
        directList.keys().forEach(key => {
            let name = key.match(/[a-zA-z1-9]+/);
            Vue.directive(name, directList(key).default)
        });
    }
}

main.js

import direct from "@/views/direct";
Vue.use(direct);

目录结构如下