vue directive全局自定義指令實(shí)現(xiàn)按鈕級別權(quán)限控制的操作方法
在日常項(xiàng)目中,通常會需要根據(jù)后臺接口返回的數(shù)據(jù),來判斷當(dāng)前用戶的按鈕操作權(quán)限。對于當(dāng)前登錄用戶來說,只有在當(dāng)前按鈕有該權(quán)限時,才顯示此按鈕;當(dāng)前按鈕沒有這個權(quán)限時,就不顯示這個按鈕。針對這種場景,可以通過 Vue.directive
自定義全局注冊指令來進(jìn)行按鈕級別權(quán)限控制。
概念
除了默認(rèn)設(shè)置的核心指令( v-model
和 v-show
), vue
允許注冊自定義指令,可以對普通 DOM
元素進(jìn)行底層操作。這是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的 dom
操作,而且是可以復(fù)用的。
注冊一個自定義指令分為:
1)全局注冊
2)局部注冊
全局自定義指令
Vue.directive
:用于全局注冊或獲取全局指令,該指令可以寫一個自定義的事件。
Vue.directive(el, hooks)
參數(shù)一(el
):自定義指令的名稱
參數(shù)二(hooks
):自定義指令的鉤子函數(shù)對象
局部自定義指令
局部自定義指令是一個對象,對象的屬性是自定義指令的名稱,對象中屬性的值是自定義指令的鉤子函數(shù)對象。如下:
<template> <div></div> </template> <script> export default { directives: { // 屬性名稱是自定義的指令名稱 // 屬性值是自定義指令的鉤子函數(shù)對象 name: { } } } </script>
自定義指令鉤子函數(shù)以及鉤子函數(shù)的參數(shù)
Vue.directive('permission', { bind: function (el, binding, vnode) {}, inserted: function (el, binding, vnode) {}, update: function (el, binding, vnode, oldVnode) {}, componentUpdated: function (el, binding, vnode, oldVnode) {}, unbind: function (el, binding, vnode) {} })
鉤子函數(shù)
自定義指令有五個生命周期(也叫鉤子函數(shù)),分別是:bind,inserted,update,componentUpdated,unbind
。
bind
:只調(diào)用一次,指令第一次綁定到元素時調(diào)用。用這個鉤子函數(shù)可以定義一個綁定時執(zhí)行一次的初始化設(shè)置。(bind
時父節(jié)點(diǎn)為null
,因?yàn)?bind
是在dom
樹繪制前調(diào)用)inserted
:被綁定元素插入父節(jié)點(diǎn)時調(diào)用(僅保證父節(jié)點(diǎn)存在,但不一定已被插入文檔中,在dom
樹繪制后調(diào)用)。update
:被綁定于元素所在的模板vNode
更新時調(diào)用,但是可能發(fā)生在其子vNode
更新之前。指令的值可能發(fā)生了改變,也可能沒有??梢酝ㄟ^比較更新前后的綁定值,來忽略不必要的模板更新。componentUpdated
:被綁定元素所在組件的VNode
及其子VNode
全部更新后調(diào)用。unbind
:只調(diào)用一次,指令與元素解綁時調(diào)用。 鉤子函數(shù)參數(shù)說明
自定義指令中傳遞的常用參數(shù):
el
: 指令所綁定的元素,可以用來直接操作DOM
。binding
: 一個對象,包含指令的很多信息。如下:name
:指令名,不包括v-
前綴。value
:指令的綁定值,例如:v-my-directive="1 + 1"
中,綁定值為2
。oldValue
:指令綁定的前一個值,僅在update
和componentUpdated
鉤子中可用。無論值是否改變都可用。expression
:字符串形式的指令表達(dá)式。例如v-my-directive="1 + 1"
中,表達(dá)式為"1 + 1"
。arg
:傳給指令的參數(shù),可選。例如v-my-directive:foo
中,參數(shù)為"foo"
。modifiers
:一個包含修飾符的對象。例如:v-my-directive.foo.bar
中,修飾符對象為{ foo: true, bar: true }
。
vnode
:Vue編譯生成的虛擬節(jié)點(diǎn)。
oldVnode
:上一個虛擬節(jié)點(diǎn),僅在 update
和 componentUpdated
鉤子中可用。
除了 el
之外,其它參數(shù)都應(yīng)該是只讀的。
全局自定義指令項(xiàng)目應(yīng)用
應(yīng)用場景:自定義一個權(quán)限指令,對需要權(quán)限判斷的 Dom
進(jìn)行顯示隱藏。
后端接口返回的權(quán)限數(shù)據(jù)結(jié)構(gòu)為:
{“search”:“搜索”,“create”:“新增新聞”,“edit”:“編輯”,“enable”:“置頂”,“forbidden”:“取消置頂”,“delete”:“刪除”}
實(shí)現(xiàn)原理:
在 el-button
按鈕上設(shè)置標(biāo)簽數(shù)值,利用 vue
的指令功能獲取按鈕實(shí)例對象和按鈕上綁定的標(biāo)簽數(shù)值,與從接口拿到的按鈕權(quán)限數(shù)據(jù)進(jìn)行匹配,如果匹配成功,證明用戶擁有該按鈕的使用權(quán)限,如果發(fā)現(xiàn)沒有使用權(quán)限,則在指令處理函數(shù)中編寫代碼移除該按鈕,界面上就看不到該按鈕了。
在 src
目錄下新建 directive
目錄,在目錄下新建 permission.js
文件:
const permission = { // 全局注冊自定義指令 install (Vue) { // 使用 inserted 函數(shù),在被綁定元素插入父節(jié)點(diǎn)時檢測該元素是否有權(quán)限 Vue.directive('permission', { inserted (el, binding, vnode) { /*el: 指令所綁定的元素,可以用來直接操作DOM。 binding: 一個對象,包含指令的很多信息。 vnode: Vue編譯生成的虛擬節(jié)點(diǎn)。*/ const path = window.location.hash.slice(1).split('?')[0] const { value } = binding // 自定義指令的執(zhí)行函數(shù),取到登錄緩存的按鈕權(quán)限數(shù)組 const power = JSON.parse(window.sessionStorage.power) const operate = power[path] || {} if (!operate[value]) { // 判斷是否有權(quán)限,如果沒有權(quán)限,則刪除該節(jié)點(diǎn) el.parentNode && el.parentNode.removeChild(el) } } }) } } export default permission
在入口文件 src\main.js
里面引入自定義指令:
import permissionfrom './directive/permission' Vue.use(permission)
在使用的頁面,按鈕中只需引用v-operate
指令,賦值判斷即可:
<el-button @click='delHandle' type="primary" v-permission="'delete'">刪除</el-button>
到此這篇關(guān)于vue directive全局自定義指令實(shí)現(xiàn)按鈕級別權(quán)限控制的文章就介紹到這了,更多相關(guān)vue directive按鈕級別權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Vue的前端界面實(shí)現(xiàn)日期時間實(shí)時顯示簡單代碼
今天在項(xiàng)目中有一個功能是要求顯示北京的實(shí)時時間,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue的前端界面實(shí)現(xiàn)日期時間實(shí)時顯示的相關(guān)資料,需要的朋友可以參考下2024-01-01vue3中g(shù)etCurrentInstance獲取組件實(shí)例踩坑詳細(xì)記錄
getCurrentInstance()是Vue.js3?Composition?API中的一個函數(shù),它的作用是獲取當(dāng)前組件的實(shí)例對象,下面這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance獲取組件踩坑的相關(guān)資料,需要的朋友可以參考下2024-02-02vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例
今天小編就為大家分享一篇vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決
這篇文章主要為大家介紹了vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09Vue ElementUI之Form表單驗(yàn)證遇到的問題
這篇文章主要介紹了Vue ElementUI之Form表單驗(yàn)證遇到的問題,需要的朋友可以參考下2017-08-08vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程
在業(yè)務(wù)中列表拖拽排序是比較常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)拖拽排序功能的詳細(xì)教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)帶樣式的單文件組件的新方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05