vue使用自定義指令實現(xiàn)按鈕權(quán)限展示功能
更新時間：2022年04月29日 09:28:20 作者：suoh's Blog
這篇文章主要介紹了vue中使用自定義指令實現(xiàn)按鈕權(quán)限展示功能，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、在src下新建directive文件夾
二、定義index.js文件，在vue上注入自定義指令
import hasBtn from './permission/hasBtn'
const install = function (Vue) {
Vue.directive('hasBtn', hasBtn)
}
if (window.Vue) {
window['hasBtn'] = hasBtn
Vue.use(install); // eslint-disable-line
}
export default install
三、編寫自定義指令
hasBtn.js文件
/**
* 設(shè)置操作權(quán)限標識符
*/
export default {
inserted(el, binding, vnode) {
/** 從binding中獲取dom元素的value值 */
const { value } = binding
/** 存放value值 */
const btn_permission = value;
/** 拿到所有具備權(quán)限按鈕的集合，通過傳入的按鈕id進行匹配 */
const permissions = JSON.parse(sessionStorage.getItem('btnarr'))
/** 利用some查詢，只要有一個元素滿足條件就返回true，全部不滿足返回false */
var hasPermissions = permissions.some(permission => {
return btn_permission == permission.menuId
})
/** 傳入的按鈕id不存在集合里面就移除該節(jié)點 */
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
}
}
}四、使用
例如在一個vue頁面里面的一個新增按鈕加上v-hasBtn屬性
<el-button v-hasBtn="15" type="primary" icon="el-icon-plus" size="mini" @click="addRelease">新增</el-button>
直接傳入該按鈕的id，即 v-hasBtn="15"，vue的自定義指令都是用v-開頭即可，此時就可以觸發(fā)自定義指令定義的函數(shù)，達到按鈕權(quán)限可控的目的。
到此這篇關(guān)于vue中使用自定義指令實現(xiàn)按鈕權(quán)限展示問題的文章就介紹到這了,更多相關(guān)vue自定義指令按鈕權(quán)限展示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue使用dagre-d3畫流程圖的完整代碼,dagre-d3.js是一個用于在Vue.js框架中實現(xiàn)DAG（有向無環(huán)圖）可視化的庫,它結(jié)合了vue.js、dagre和d3.js這三個庫的功能,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vuex操作state對象的實例代碼,本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
vue實現(xiàn)el-table點選和鼠標框選功能的方法
在Vue中我們經(jīng)常需要處理表格數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)el-table點選和鼠標框選功能的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue.js初學入門教程第二篇,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Vue表單驗證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實現(xiàn)表單元素校驗時，出現(xiàn)下拉框內(nèi)容選中后校驗不消失的異常校驗情形，這篇文章主要介紹了Vue表單驗證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue3.0 加載json的方法（非ajax），幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-10-10
本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了Vuex的各個模塊封裝的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要給大家介紹了關(guān)于vue項目main.js使用方法的相關(guān)資料,main.js文件是程序的入口文件,加載各種公共組件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了 vue 動態(tài)組件component ，vue提供了一個內(nèi)置的<component>,專門用來實現(xiàn)動態(tài)組件的渲染，這個標簽就相當于一個占位符，需要使用is屬性指定綁定的組件，想了解更多詳細內(nèi)容的小伙伴請參考下面文章的具體內(nèi)容2021-11-11