vue怎么使用自定義指令實現按鈕權限展示功能

今天小編給大家分享一下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不存在集合里面就移除該節點 */
            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-開頭即可，此時就可以觸發自定義指令定義的函數，達到按鈕權限可控的目的。

以上就是“vue怎么使用自定義指令實現按鈕權限展示功能”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。