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使用国密SM4进行加密、解密的过程
国密SM4算法是一种对称加密算法，适用于对称密钥加密和解密的场景，这篇文章主要介绍了vue使用国密SM4进行加密、解密,需要的朋友可以参考下
2023-07-07
详解vue中的动态组件component和keep-alive
这篇文章主要介绍了详解vue中的动态组件component和keep-alive的相关资料,这大家需要注意include属性和exclude属性只能用一个,不能同时使用,本文给大家介绍的非常详细,需要的朋友参考下吧
2023-11-11
vue+rem自定义轮播图效果
这篇文章主要为大家详细介绍了vue+rem自定义轮播图效果，手指触摸左滑和右滑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
全面解析vue router 基本使用(动态路由，嵌套路由)
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。这篇文章主要介绍了vue router 基本使用 ,需要的朋友可以参考下
2018-09-09
Vue项目pdf(base64)转图片遇到的问题及解决方法
这篇文章主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下
2018-10-10
Vue IP地址输入框实例代码
本文通过实例代码给大家介绍Vue IP地址输入框实现,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
vue、uniapp中动态添加绑定style、class 9种实现方法
这篇文章主要介绍了vue、uniapp中动态添加绑定style、class 9种方法实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
vue中$nextTick的用法讲解
今天小编就为大家分享一篇关于vue中$nextTick的用法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
vue 数据双向绑定的实现方法
这篇文章主要介绍了vue 数据双向绑定的实现方法，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
vue对象复制方式(深拷贝,多层对象拷贝方式在后面)
这篇文章主要介绍了vue对象复制方式(深拷贝,多层对象拷贝方式在后面)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09