欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue directive全局自定義指令實(shí)現(xiàn)按鈕級別權(quán)限控制的操作方法

 更新時間:2023年02月06日 09:13:13   作者:*且聽風(fēng)吟  
這篇文章主要介紹了vue directive全局自定義指令實(shí)現(xiàn)按鈕級別權(quán)限控制,本文結(jié)合實(shí)例代碼對基本概念做了詳細(xì)講解,需要的朋友可以參考下

在日常項(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-modelv-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:指令綁定的前一個值,僅在 updatecomponentUpdated 鉤子中可用。無論值是否改變都可用。
  • 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),僅在 updatecomponentUpdated 鉤子中可用。

除了 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)文章

最新評論