Vue自定义v-has指令,做按钮权限判断的步骤
应用场景
以后台管理系统为例,每个用户所拥有的按钮权限不一样。管理员配置权限之后,用户登录时,从接口拿到按钮权限列表,然后根据后台数据判断显示哪些按钮。
简单说一下,自定义指令
Vue.js官网关于自定义指令的讲解
基础概念
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
只调用一次,指令与元素解绑时调用。
其他
除此之外,还有一些基础概念,钩子函数参数,动态指令参数,等等。
官网讲的十分清楚,在此不再多做赘述。
原理
如果对自定义指令的源码感兴趣,也有一篇文章讲的很通透
//www.jb51.net/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指令的资料请关注我们其它相关文章!