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)文章
Element中el-input密碼輸入框瀏覽器自動填充賬號密碼問題的解決方法
自己寫了一個管理系統(tǒng),登錄成功之后,瀏覽器提示我保存賬號密碼,每次登錄時就會自動回填記住的賬號密碼,方便用戶快速登錄,下面這篇文章主要給大家介紹了關(guān)于Element中el-input密碼輸入框瀏覽器自動填充賬號密碼問題的解決方法,需要的朋友可以參考下2022-09-09
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-09-09
這篇文章主要介紹了VUE前端按鈕權(quán)限控制，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
折疊面板大家都不陌生,很多時候需要實現(xiàn)一些復雜的交互,就會用到它,簡潔直觀還美觀,下面就跟隨小編一起學習一下如果使用Vue3實現(xiàn)折疊面板組件吧2024-01-01
這篇文章主要介紹了前端項目中的Vue、React錯誤監(jiān)聽,文章圍繞主題的相關(guān)資料展開詳細內(nèi)容介紹需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了vue-cli webpack配置文件分析,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
詳解在vue-cli項目中使用mockjs(請求數(shù)據(jù)刪除數(shù)據(jù))
本篇文章主要介紹了在vue-cli項目中使用mockjs(請求數(shù)據(jù)刪除數(shù)據(jù))，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題
這篇文章主要介紹了為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題,需要的朋友可以參考下2018-04-04
Vue2+Echarts封裝組件之專注邏輯,圖表生成自動化方式
文章介紹了使用Vue2封裝的Echarts圖表組件,簡化了圖表的生成和渲染過程,提供了多種圖表類型和交互功能,提高了開發(fā)效率,幫助開發(fā)者專注于業(yè)務(wù)邏輯的開發(fā)2025-02-02
這篇文章主要介紹了vue路由打開一個新的窗口的方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11