<a style="color: orange;">Vue自定義v-has指令實(shí)現(xiàn)按鈕權(quán)限判斷</a>
應(yīng)用場景：管理員配置權(quán)限之后轩娶、用戶登錄時(shí)乳讥、從接口拿到按鈕權(quán)限列表、然根據(jù)后臺有哪些數(shù)據(jù)判斷顯示哪些按鈕
全局自定義 (<a >自定義指令源碼</a>)
//注冊全局自定義指令 'v-focus'
Vue.directive("focus", {
//當(dāng)被綁定元素插入到 DOM 中
inserted: function (el) {
//聚焦元素
el.focus()
}
})
局部自定義
//如果想要注冊局部指令昭殉、組件中要接收一個 direvtives 的選項(xiàng)
direvtives: {
focus: {
//指令的定義
inserted: function (el) {
el.focus()
}
}
}
一個指令定義對象可以提供如下幾個鉤子函數(shù)（均為可選）
**bind: **只調(diào)用一次棵癣，指令第一次綁定到元素時(shí)調(diào)用辕翰。在這里可以進(jìn)行一次性的初始化設(shè)置。
inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（僅保證父節(jié)點(diǎn)存在狈谊，但不一定已被插入文檔中）
update: 所在組件的VNode更新時(shí)調(diào)用喜命，但是可能發(fā)生在其子VNode更新之前。指令的值可能發(fā)生了改變河劝，也可能沒有壁榕。但是你可以通過比較更新前后的值來忽略不必要的模板更新。
componentUpdated: 指令所在組件的VNode及其子VNode全部更新后調(diào)用赎瞎。
**unbind: **只調(diào)用一次牌里，指令與元素解綁時(shí)調(diào)用。
自定義指令v-has
登錄接口拿到按鈕權(quán)限列表，存入本地緩存LOGIN_USER_BUTTON_AUTH中
數(shù)據(jù)格式如下：
[
{
"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中統(tǒng)一導(dǎo)出
const hasPermission = {
install (Vue, options) {
Vue.directive("has", {
inserted: (el, binding, vnode)=>{
filterGlobalPermission(el, binding, vnode);
}
});
}
};
/**
* 全局權(quán)限控制
*/
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文件也可以統(tǒng)一在index.js里導(dǎo)出
import hasPermission from "./hasPermission"
export { hasPermission }
main.js中引入
import { hasPermission } from "@/utils"
Vue.use(hasPermission)
組件中使用v-has根據(jù)按鈕權(quán)限，判斷是否顯示該按鈕
<el-button v-has=""sys:arch:add"" type="primary" size="mini" icon="el-icon-plus" @click="add("1")">
新增
</el-button>
