Vue-自定义指令（v-permission）

vue除了默认设置的核心指令( v-model ，v-show，v-if ), Vue 也允许注册自定义指令。自定义指令就是一种有效的补充和扩展，不仅仅可用于定义任何dom操作，并且是可以复用的。目前项目刚好是有在做按钮权限方面的功能，我实现的方式就是用自定义指令（v-permission）来实现的。

在src下面创建一个directives的文件夹

在文件夹里创建一个permision文件内容如下：

export default {
    inserted(el, bindling) {
        //bindling.value为指令的绑定值
        let perVal = bindling.value;
        if (bindling.value) {
            //hasPermision this.checkValidate是我们项目的自定义的检验权限码的方法
            // 校验的方法可以自由发挥
            let hasPermision = this.checkValidate(perVal)
            //没有权限就先隐藏此元素吧
            if (!hasPermision) {
                el.style.display = "none"
            }
        }
    }
}

然后再将permission.js引入到同文件下的index.js：

import permission from "./permission"
import toFixed from "./toFixed"
//批量注册指令
const directives = {
    permission,
    toFixed
}
//注册的一般写法，循环遍历directives，通过vue.directive注册
export default {
    install(Vue){
        Object.keys(directives).forEach(key=>{
            Vue.directive(key,directives[key])
        })
    }
}

然后在main.js里面全局引入index.js（当然我们也可以选择按需引入，可以根据不同的场景来）

最后使用自定义指令的话就和Vue自带的指令是一样