Vue3封装全局自定义指令实现按钮权限控制功能实例

更新时间：2025年07月10日 10:28:09 作者：小码龙~

在Vue应用中自定义指令是一种强大的功能,可以用于封装DOM操作逻辑,这篇文章主要介绍了Vue3封装全局自定义指令实现按钮权限控制功能的相关资料,需要的朋友可以参考下

一、什么是按钮权限控制

概念：根据当前用户的权限数据控制按钮的显示和隐藏

二、思路 (往往是后端返回的权限标识)

后端返回的权限数据模拟

// 模拟权限mock数据
const permissions = [
    "park:bulidng:add",
    "park:bulidng:del",
    "park:bulidng:edit",
]

思路：每一个需要做权限控制的按钮都有一个自己独有的标识 , 如果标识可以在权限数据列表中找到，则显示，找不到就隐藏

三、实现

按钮绑定上v-my-point自定义全局指令

代码如下（示例）：

  <div class="container">
    <el-button v-my-point="'bulidng:add'" type="success">添加</el-button>
    <el-button v-my-point="'bulidng:del'" type="primary">编辑</el-button>
    <el-button v-my-point="'bulidng:edit'" type="danger">删除</el-button>
  </div>

main.ts注册为全局指令

// 自定义按钮权限directive
const myPointDirective:Directive<HTMLElement,string> = (el,binding) => {
    if (!permissions.includes(user + ":" + binding.value)) {
        el.style.display = 'none'
    }

}
//  全局注册指令
app.directive('my-point', myPointDirective);

效果：

后端返回的权限数据没有，则上面按钮就不会显示

总结

这样就实现了通过全局自定义指令来实现按钮权限的控制了。

到此这篇关于Vue3封装全局自定义指令实现按钮权限控制功能的文章就介绍到这了,更多相关Vue3自定义指令按钮权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于vue编写一个月饼连连看游戏
中秋节快要到啦,我们一起用Vue创建一个简单的连连看游戏,连连看大家一定都玩过吧,通过消除相同的图案来清理棋盘,小编将一步步引导大家完成整个游戏的制作过程,让我们开始吧,一起为中秋节增添一些互动和娱乐
2023-09-09
快速解决Error: error:0308010C:digital envelope ro
因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,下面通过本文给大家分享快速解决Error: error:0308010C:digital envelope routines::unsupported的三种解决方案,感兴趣的朋友一起看看吧
2024-02-02
Vue3中vuex的基本使用方法实例
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于Vue3中vuex的基本使用方法,需要的朋友可以参考下
2022-04-04
详解基于mpvue的小程序markdown适配解决方案
本篇文章主要介绍了详解基于mpvue的小程序markdown适配解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue日历组件的封装方法
这篇文章主要为大家详细介绍了vue封装一个日历组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
如何使用vue3打造一个物料库
这篇文章主要介绍了如何使用vue3打造一个物料库，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-05-05
Vue Render函数原理及代码实例解析
这篇文章主要介绍了Vue Render函数原理及代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
基于vue3&element-plus的暗黑模式实例详解
实现暗黑主题的方式有很多种,也有很多成型的框架可以直接使用,下面这篇文章主要给大家介绍了关于基于vue3&element-plus的暗黑模式的相关资料,需要的朋友可以参考下
2022-12-12
Vue中状态管理器(vuex)详解以及实际应用场景
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
vue实现网页语言国际化切换
这篇文章介绍了vue实现网页语言国际化切换的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021-11-11