前述

雖然VUE 定義了一些常用的指令，例如v-on、v-bind等，但是在我們實際開發(fā)的時候，還是會自己定義一些指令用于適應(yīng)我們自己的業(yè)務(wù)。

實現(xiàn)

這里由于我的項目做了動態(tài)權(quán)限，頁面的按鈕也需要根據(jù)不同的權(quán)限來渲染，那么這里就需要我們這個權(quán)限指令了

// 文件名稱：permission.js
import Vue from 'vue'
import store from '@/store'// 是否有權(quán)限
const hasPermission = requirePermission => {// 當(dāng)前菜單需要的權(quán)限let requirePermissionList = Array.isArray(requirePermission) ? requirePermission : [requirePermission]// 用戶持有的權(quán)限let userPermissionList = store.getters.permissions// 用戶擁有所有的權(quán)限 *if (userPermissionList.includes("*")){return true}// 判斷用戶是否持有菜單需要權(quán)限return userPermissionList.some(e => requirePermissionList.includes(e))
}// 指令
Vue.directive('perm', {inserted: ((el, binding) => {if (!hasPermission(binding.value)) {el.parentNode.removeChild(el)}})
})

然后在main.js中導(dǎo)入這個文件

import '@/directives/premission'

最后在頁面文件中使用這個指令

<a-space slot="action" slot-scope="text, record"><a-button v-perm="['sys:dict:update']" icon="edit" @click="handleEdit(record)"/><a-button v-perm="['sys:dict:delete']" icon="delete" @click="handleDelete(record)"/>
</a-space>

注意： 這里我的用戶持有的權(quán)限是在store中，通過getters導(dǎo)出，并且如果是所有權(quán)限‘*’，直接返回?fù)碛性摪粹o權(quán)限

總結(jié)

以上是生活随笔為你收集整理的Vue 自定义权限指令的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。