Vue.directive自定义v-指令

翻阅文章有感，记录学习

vue前端菜单权限控制_vue权限管理菜单思路-CSDN博客

一、定义：Vue.directive是Vue框架中给开发者用于注册自定义指令和返回已注册指令的API

二、基本语法：

// 注册
Vue.directive('my-directive', {bind: function () {},inserted: function () {},update: function () {},componentUpdated: function () {},unbind: function () {}
})// 注册 (指令函数)
Vue.directive('my-directive', function () {// 这里将会被 `bind` 和 `update` 调用
})// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

 1.如果定义对象，包含以下几个钩子函数：                

• ‌bind‌：指令首次绑定到元素时调用，仅调用一次。
• ‌inserted‌：被绑定元素插入父节点时调用。
• ‌update‌：被绑定元素所在模板更新时调用。
• ‌componentUpdated‌：被绑定元素所在组件的所有子组件更新后调用。
• ‌unbind‌：指令与元素解绑时调用‌。

 2.钩子函数的参数

     每个钩子函数接收以下参数：

• ‌el‌：指令所绑定的元素，可以用来直接操作DOM。
• ‌binding‌：一个对象，包含指令名、绑定值、旧值、表达式、参数和修饰符等信息。
• ‌vnode‌：Vue编译生成的虚拟节点。
• ‌oldVnode‌：上一个虚拟节点，仅在update和componentUpdated钩子中可用

三、示例使用：

自定义一个改变元素背景颜色的指令，且颜色由v-background后的赋值给出

  定义指令

Vue.directive('background', {bind(el,binding) {el.style.backgroundColor= binding.value;}
});

在标签上使用指令

<div v-background="black">Hello Vue!</div>

四、场景：需要使用登录后返回的权限字符，对按钮进行权限控制

 路由配置：

{path: '/permission',component: Layout,name: ' ',meta: {btnPermissions: ['admin', 'supper', 'normal']
},

 指令配置：

import Vue from 'vue'
/** 权限指令 **/
const has = Vue.directive('has', {bind: function (el, binding, vnode) {// 获取页面按钮权限let btnPermissionsArr = [];if(binding.value){// 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较btnPermissionsArr = Array.of(binding.value);}else{// 否则获取路由中的参数，根据路由的 btnPermissionsArr 和当前登录人按钮权限做比较btnPermissionsArr = vnode.context.$route.meta.btnPermissions;}if (!Vue.prototype.$_has(btnPermissionsArr)) {el.parentNode.removeChild(el);}}
});
// 权限检查方法
Vue.prototype.$_has = function (value) {let isExist = false;// 获取用户按钮权限let btnPermissionsStr = sessionStorage.getItem("btnPermissions");if (btnPermissionsStr == undefined || btnPermissionsStr == null) {return false;}if (value.indexOf(btnPermissionsStr) > -1) {isExist = true;}return isExist;
};
export {has}

 使用：

<el-button type="primary" v-has> </el-button>