Vue自定義v-has指令,做按鈕許可權判斷的步驟
應用場景
以後臺管理系統為例，每個使用者所擁有的按鈕許可權不一樣。管理員配置許可權之後，使用者登入時，從介面拿到按鈕許可權列表，然後根據後臺資料判斷顯示哪些按鈕。
簡單說一下，自定義指令
cn.vuejs.org/v2/guide/cu…
基礎概念
Vue除了核心功能預設內建的指令（v-model和v-show）還可以註冊自定義指令。
在Vue2.0中，程式碼複用和抽象的主要形式是元件。但有的情況下，仍需要對普通DOM元素進行底層操作，這時候就會用到自定義指令。
譬如，自定義一個v-focus指令，當頁面載入時，輸入框將獲得焦點
<inputhttp://www.cppcns.comv-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.jb51.net/article/209716.htm
原理就是：
- 解析Vue的屬性的時候，遍歷每個屬性；
- 物件上增加一個directives屬性儲存指令資訊；
- 渲染完成後會執行directives模組的create鉤子函式；
- Vue 編譯生成的虛擬節點，也就是VNode插入到父節點後，
- 依次執行每個函式，也就執行到我們自定義定義的inserted鉤子函數了
自定義指令v-has
話休絮煩，言歸正傳。
今天主要是總結一下：自定義指令v-has，按鈕許可權判斷
登入介面拿到按鈕許可權列表，存入本地快取LOGIN_USER_BUTTON_AUTH中
資料格式如下：
[
{www.cppcns.com
"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,bindin程式設計客棧g,vnode)=>{
filterGlobalPermission(el,binding,vnode);
}
});
}
};
/**
* 全域性許可權控制
*/
export const filterGlobalPermission = (el,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指令的資料請關注我們其它相關文章！