vue动态菜单权限控制,vue菜单权限设计实现
本文主要介绍在vue中使用自定义命令显示按钮权限的功能。本文结合实例代码向您详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
:
目录
1.在src 2下创建一个新的指令文件夹。定义index.js文件，将自定义指令注入vue 3。编写自定义说明4。使用
一、在src下新建directive文件夹
二、定义index.js文件，在vue上注入自定义指令
从导入hasBtn。/permission/hasBtn
const install=function (Vue) {
Vue.directive(hasBtn ，hasBtn)
}
如果(窗口。Vue) {
window[hasBtn]=hasBtn
Vue.use(安装)；//eslint-disable-line
}
导出默认安装
三、编写自定义指令
HasBtn.js文件
/**
*设置操作权限标识符。
*/
导出默认值{
已插入(el，binding，vnode) {
/* *从绑定中获取dom元素的值*/
const { value }=绑定
/* *存储值*/
const btn _ permission=value
/* *获取所有有权限按钮的集合，通过传入的按钮id进行匹配*/
const permissions=JSON . parse(session storage . getitem( Bt narr ))
/* *使用一些查询，只要有一个元素满足条件，就会返回true如果所有元素都不满足条件，它将返回false */
var has permissions=permissions . some(permission={
return BTN _ permission==permission . menuid
})
/* *如果传递的按钮id在集合中不存在，则移除节点*/
如果(！hasPermissions) {
El . parent node El . parent node . remove child
}
}
}
四、使用
例如，在vue页面中，添加一个具有v-hasBtn属性的新按钮。
El-button v-hasbtn= 15 type= primary icon= El-icon-plus size= mini @ click= add release new/El-button
直接传入按钮的id，即v-hasBtn=15 。vue的所有自定义指令都可以以v-开头，然后可以触发自定义指令定义的功能，从而达到按钮权限可控的目的。
这就是这篇关于在vue中使用自定义命令显示按钮权限的文章。请搜索我们以前的文章或继续浏览下面的相关文章，了解更多关于在vue中使用自定义命令显示按钮权限的信息。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。