应用场景
以后台管理系统为例，每个用户所拥有的 按钮 权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。
简单说一下，自定义 指令
Vue .js官网关于自定义指令的讲解
cn.vuejs.org/v2/guide/cu…
基础概念
Vue除了核心功能默认内置的指令（v-model和v-show）还可以注册自定义指令。
在Vue2.0中，代码复用和抽象的主要形式是组件。但有的情况下，仍需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。
譬如，自定义一个v-focus指令，当页面加载时，输入框将获得焦点
< input v-focus>
全局自定义
// 注册一个全局自定义指令 `v-focus`
Vue.directive( 'focus' , {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部自定义
//如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
钩子函数
一个指令定义对象可以提供如下几个钩子函数（均为可选）
bind
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted
被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
update
所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated
指令所在组件的VNode及其子VNode全部更新后调用。
unbind
只调用一次，指令与元素解绑时调用。
其他
除此之外，还有一些基础概念，钩子函数参数，动态指令参数，等等。
cn.vuejs.org/v2/guide/cu…
官网讲的十分清楚，在此不再多做赘述。
原理
如果对自定义指令的源码感兴趣，也有一篇文章讲的很通透
//www.zzvips.com/article/209716.htm
原理就是：
解析Vue的属性的时候，遍历每个属性； 对象上增加一个directives属性保存指令信息； 渲染完成后会执行directives模块的create钩子函数； Vue 编译生成的虚拟节点，也就是VNode插入到父节点后， 依次执行每个函数，也就执行到我们自定义定义的inserted钩子函数了
自定义指令 v-has
话休絮烦，言归正传。
今天主要是总结一下：自定义指令v-has，按钮 权限判断
登录接口拿到按钮权限列表，存入本地缓存LOGIN_USER_BUTTON_AUTH中
数据格式如下：
[
{
"checked" : false ,
"component" : "" ,
"createTime" : "2019-06-29 18:21:06" ,
"createUser" : "026a564bbfd84861ac4b65393644beef" ,
"icon" : "" ,
"id" : "1503273153861066776" ,
"name" : "今日采集（案卷）" ,
"open" : "true" ,
"parentId" : "2328050996633395469" ,
"parentName" : "首页" ,
"permission" : "sys:index:vol" ,
"sort" :103,
"status" : "0" ,
"type" : "2" ,
"updateTime" : "2021-01-27 15:51:15" ,
"updateUser" : "026a564bbfd84861ac4b65393644beef" ,
"url" : ""
}
]
自定义v-has指令的配置
在utils文件夹下，新建hasPermission.js文件，在index.js中统一导出
const hasPermission = {
install (Vue, options) {
Vue.directive( 'has' , {
inserted: (el, binding, vnode)=>{
filterGlobalPermission(el, binding, vnode);
}
});
}
};
/**
* 全局权限控制
*/
export const filterGlobalPermission = (el, binding, vnode) => {
let permissionList = [];
let authList = JSON.parse(localStorage.getItem( 'LOGIN_USER_BUTTON_AUTH' ) || "[]" );
for (let auth of authList) {
permissionList.push(auth);
}
if (!permissionList.length) {
el.parentNode.removeChild(el);
return ;
}
let permissions = [];
for (let item of permissionList) {
permissions.push(item.permission);
}
if (!permissions.includes(binding.value)) {
el.parentNode.removeChild(el);
}
}
export default hasPermission;
utils文件下的index.js
utils文件夹下的其他js文件也可以统一在index.js里导出
import hasPermission from './hasPermission'
export { hasPermission }
main.js中引入
import { hasPermission } from '@/utils'
Vue.use(hasPermission)
组件中使用v-has根据按钮权限，判断是否显示该按钮
< el-button v-has = "'sys:arch:add'" type = "primary" size = "mini" icon = "el-icon-plus" @ click = "add('1')" >
新增
</ el-button >
以上就是Vue自定义v-has指令,做按钮权限判断的步骤的详细内容，更多关于Vue 自定义v-has指令的资料请关注服务器之家其它相关文章！
原文链接：https://juejin.cn/post/6950482024368963597
查看更多关于Vue自定义v-has指令,做按钮权限判断的步骤的详细内容...