前言:涉及到按钮权限一般是各类管理系统,所以需要对账号进行权限细分。此处使用Vue3的自定义指令时,默认我们已经登录了账号,并在“本地 || pinia || vuex”中存储了账号的权限。
先来说说Vue3的自定义指令用法,全局注册自定义的语法:
// main.js
const app = createApp(App)
app.directive("指令名",(el, binding)=>{})
app.directive("指令名",{ 各种生命周期钩子 })
创建自定义指令时,可以传递两个参数,第一个是自定义的指令名字,例如"premission",“color”。
使用的时候就是v-color,v-premission。
第二个参数官方叫法“指令定义对象”,可以传个函数,也可以传个对象。
那么第二个参数什么时候使用函数,什么时候使用对象?
官方解释:对于自定义指令来说,常见的情况是仅仅需要在
mounted
和updated
上实现某些操作,除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令。
所以当你需要操作除了 mounted
和 updated
以外的其他生命周期时,第二个参数就传对象。
一个指令的定义对象可以提供N多种钩子函数,如下:
// 在绑定元素的 attribute 前或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {}
知道了自定义指令的使用方法,就可以通过自定义指令对我们的按钮进行权限判断了。
考虑到实际项目中自定义指令极有可能不止一个,如果都写在main.js里会很不优雅,所以我们直接封装一个专门注册自定义指令的函数,将Vue实例app作为参数传进去,就可以在函数里疯狂地注册自己想要的自定义指令了。
// 文件夹directive下的index.js
import permission from './permission'
import colorfrom './color'
export default function (app) {
app.directive('permission', permission) // 传入定义对象
app.directive('color', color)
}
自定义指令中的定义对象的逻辑抽取出来单独封装,如上述代码中的permission。
// 文件permission.js
// 判断按钮权限逻辑
const checkPermission = (el, binding) => {
// 获取自定义指令传过来的数组(binding.value)
const btnRoles = binding.value
// 取一下本地存的账号权限
const userRoles = JSON.parse(localStorage.getItem("role"))
// 判断自定义指令的传值,在账号权限数组中能否找到
if (btnRoles && btnRoles instanceof Array) {
if (btnRoles.length) {
// 能找到返回true
const hasPermission = userRoles.some(v => {
return btnRoles.includes(v)
})
// 找不到返回false,使用自定义指令的钩子函数,操作dom元素删除该节点
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
}
else {
throw new Error(`传入关于权限的数组,如 v-permission="['super','normal']"`)
}
}
}
// 导出一个对象用作自定义指令的第二个参数
export default {
mounted(el, binding) {
checkPermission(el, binding)
},
updated(el, binding) {
checkPermission(el, binding)
}
}
在组件中使用我们的自定义指令
<el-button v-permission="['super']">超级管理员</el-button>