vue directive全局自定義指令實現(xiàn)按鈕級別權限控制的操作方法
在日常項目中,通常會需要根據(jù)后臺接口返回的數(shù)據(jù),來判斷當前用戶的按鈕操作權限。對于當前登錄用戶來說,只有在當前按鈕有該權限時,才顯示此按鈕;當前按鈕沒有這個權限時,就不顯示這個按鈕。針對這種場景,可以通過 Vue.directive
自定義全局注冊指令來進行按鈕級別權限控制。
概念
除了默認設置的核心指令( v-model
和 v-show
), vue
允許注冊自定義指令,可以對普通 DOM
元素進行底層操作。這是一種有效的的補充和擴展,不僅可以用于定義任何的 dom
操作,而且是可以復用的。
注冊一個自定義指令分為:
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í)行一次的初始化設置。(bind
時父節(jié)點為null
,因為bind
是在dom
樹繪制前調(diào)用)inserted
:被綁定元素插入父節(jié)點時調(diào)用(僅保證父節(jié)點存在,但不一定已被插入文檔中,在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
:字符串形式的指令表達式。例如v-my-directive="1 + 1"
中,表達式為"1 + 1"
。arg
:傳給指令的參數(shù),可選。例如v-my-directive:foo
中,參數(shù)為"foo"
。modifiers
:一個包含修飾符的對象。例如:v-my-directive.foo.bar
中,修飾符對象為{ foo: true, bar: true }
。
vnode
:Vue編譯生成的虛擬節(jié)點。
oldVnode
:上一個虛擬節(jié)點,僅在 update
和 componentUpdated
鉤子中可用。
除了 el
之外,其它參數(shù)都應該是只讀的。
全局自定義指令項目應用
應用場景:自定義一個權限指令,對需要權限判斷的 Dom
進行顯示隱藏。
后端接口返回的權限數(shù)據(jù)結(jié)構(gòu)為:
{“search”:“搜索”,“create”:“新增新聞”,“edit”:“編輯”,“enable”:“置頂”,“forbidden”:“取消置頂”,“delete”:“刪除”}
實現(xiàn)原理:
在 el-button
按鈕上設置標簽數(shù)值,利用 vue
的指令功能獲取按鈕實例對象和按鈕上綁定的標簽數(shù)值,與從接口拿到的按鈕權限數(shù)據(jù)進行匹配,如果匹配成功,證明用戶擁有該按鈕的使用權限,如果發(fā)現(xiàn)沒有使用權限,則在指令處理函數(shù)中編寫代碼移除該按鈕,界面上就看不到該按鈕了。
在 src
目錄下新建 directive
目錄,在目錄下新建 permission.js
文件:
const permission = { // 全局注冊自定義指令 install (Vue) { // 使用 inserted 函數(shù),在被綁定元素插入父節(jié)點時檢測該元素是否有權限 Vue.directive('permission', { inserted (el, binding, vnode) { /*el: 指令所綁定的元素,可以用來直接操作DOM。 binding: 一個對象,包含指令的很多信息。 vnode: Vue編譯生成的虛擬節(jié)點。*/ const path = window.location.hash.slice(1).split('?')[0] const { value } = binding // 自定義指令的執(zhí)行函數(shù),取到登錄緩存的按鈕權限數(shù)組 const power = JSON.parse(window.sessionStorage.power) const operate = power[path] || {} if (!operate[value]) { // 判斷是否有權限,如果沒有權限,則刪除該節(jié)點 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>
到此這篇關于vue directive全局自定義指令實現(xiàn)按鈕級別權限控制的文章就介紹到這了,更多相關vue directive按鈕級別權限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
基于Vue的前端界面實現(xiàn)日期時間實時顯示簡單代碼
今天在項目中有一個功能是要求顯示北京的實時時間,下面這篇文章主要給大家介紹了關于如何基于Vue的前端界面實現(xiàn)日期時間實時顯示的相關資料,需要的朋友可以參考下2024-01-01vue3中getCurrentInstance獲取組件實例踩坑詳細記錄
getCurrentInstance()是Vue.js3?Composition?API中的一個函數(shù),它的作用是獲取當前組件的實例對象,下面這篇文章主要給大家介紹了關于vue3中getCurrentInstance獲取組件踩坑的相關資料,需要的朋友可以參考下2024-02-02vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例
今天小編就為大家分享一篇vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決
這篇文章主要為大家介紹了vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09