本文已参与「新人创作礼」活动，一起开启掘金创作之路。

v-permission的创建和使用

在项目的src文件夹下新建一个名为directives的文件夹，在directives文件夹下面新建两个js文件：index.jx和permission.js，前者用于自定义指令的注册，后者用于写自定义权限指令的具体内容，如下：

permission.js中的内容：

export default {
    inserted(el,bindling){
    	//bindling.value为指令的绑定值
        let perVal = bindling.value;
        if(bindling.value){
        //假设某用户对某模块只有添加和删除的权限
    	//这个权限信息(即pers)应该是不同用户登录时从后台拿到的对应的信息
            let pers=['add','delete'];
            //hasPer为true为有权限
    		//hasPer为false为无权限
            let hasPer = pers.some(item=>{
                return item == perVal
            });
             //没有权限就先隐藏此元素吧
            if(!hasPer){
                el.style.display="none"
            }
        }
    }
}

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

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

最后在main.js中全局引入这个index.js:
(按需引入，可全局，可局部，此为全局)

// 按钮权限
import Directives from './directives/index'
Vue.use(Directives)

使用