vue使用自定義指令實現按鈕權限展示功能
更新時間：2022年04月29日 09:28:20 作者：suoh's Blog
這篇文章主要介紹了vue中使用自定義指令實現按鈕權限展示功能，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、在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文件
/**
* 設置操作權限標識符
*/
export default {
inserted(el, binding, vnode) {
/** 從binding中獲取dom元素的value值 */
const { value } = binding
/** 存放value值 */
const btn_permission = value;
/** 拿到所有具備權限按鈕的集合，通過傳入的按鈕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ā)自定義指令定義的函數，達到按鈕權限可控的目的。
到此這篇關于vue中使用自定義指令實現按鈕權限展示問題的文章就介紹到這了,更多相關vue自定義指令按鈕權限展示內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于vue使用dagre-d3畫流程圖的完整代碼,dagre-d3.js是一個用于在Vue.js框架中實現DAG（有向無環(huán)圖）可視化的庫,它結合了vue.js、dagre和d3.js這三個庫的功能,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vuex操作state對象的實例代碼,本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
在Vue中我們經常需要處理表格數據,這篇文章主要給大家介紹了關于vue實現el-table點選和鼠標框選功能的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue.js初學入門教程第二篇,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Vue表單驗證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實現表單元素校驗時，出現下拉框內容選中后校驗不消失的異常校驗情形，這篇文章主要介紹了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的各個模塊封裝的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要給大家介紹了關于vue項目main.js使用方法的相關資料,main.js文件是程序的入口文件,加載各種公共組件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了 vue 動態(tài)組件component ，vue提供了一個內置的<component>,專門用來實現動態(tài)組件的渲染，這個標簽就相當于一個占位符，需要使用is屬性指定綁定的組件，想了解更多詳細內容的小伙伴請參考下面文章的具體內容2021-11-11