vue实现按钮权限,vue菜单权限和按钮权限
本文主要介绍了vue自定义v-has指令，以及判断按钮权限的步骤，帮助大家更好的理解和学习使用Vue框架。感兴趣的朋友可以了解一下。
目录
应用场景：简述自定义指令的基本概念，全局自定义局部自定义钩子函数，其他原理，自定义指令v-hasutils的文件下index.jsmain.js中组件的介绍使用v-has根据其权限判断是否显示按钮。
应用场景
以后台管理系统为例，每个用户都有不同的按钮权限。配置好管理员权限后，用户登录时从界面获取按钮权限列表，然后根据后台数据判断显示哪些按钮。
简单说一下，自定义指令
Vue.js官网对自定义说明的解释
cn.vuejs.org/v2/guide/cu…
基础概念
除了核心功能的默认内置指令(v-model和v-show)，Vue还可以注册自定义指令。
在Vue2.0中，代码复用和抽象的主要形式是组件。但是，在某些情况下，仍然需要在底层操作常见的DOM元素，然后将使用自定义指令。
例如，自定义一个v-focus命令，当页面加载时，输入框将获得焦点。
输入垂直焦点
全局自定义
//注册一个全局自定义指令“v-focus”。
Vue.directive(focus ，{
//当绑定元素插入DOM时.
插入：函数(el) {
//焦点元素
焦点()
}
})
局部自定义
//如果要注册本地指令，该组件还接受一个指令选项：
指令：{
焦点：{
//指令的定义
插入：函数(el) {
焦点()
}
}
}
钩子函数
指令定义对象可以提供以下钩子函数(都是可选的)
约束
当指令第一次绑定到元素时，只调用一次。可以在这里执行一次性初始化。
插入的
当绑定元素插入父节点时调用(只存在父节点，但不一定插入到文档中)
更新
当组件的VNode更新时调用，但它可能发生在其子VNode更新之前。指令的值可能已更改，也可能未更改。但是您可以通过比较更新前后的值来忽略不必要的模板更新。
组件更新
指令所在组件的VNode及其子VNode都被更新和调用。
解放
当指令与元素解除绑定时，只调用一次。
其他
除此之外，还有一些基本的概念，比如钩子函数参数，动态指令参数等等。
cn.vuejs.org/v2/guide/cu…
官网说的很清楚了，这里就不赘述了。
原理
如果你对自定义指令的源代码感兴趣，还有一篇文章非常透明。
//www . JB 51 . net/article/209716 . htm
原则是：
解析Vue的属性时，遍历每个属性；
在对象上添加一个指令属性以保存指令信息；
directives模块的create hook函数将在渲染后执行；
Vue编译生成的虚拟节点即VNode插入父节点后，
依次执行每个函数，就会执行到我们自定义的插入钩子函数。
自定义指令v-has
别说了，说正事吧。
今天主要总结一下：自定义命令v-has，按钮权限判断。
接口登录获取按钮权限列表，并存储在本地缓存LOGIN_USER_BUTTON_AUTH中。
数据格式如下：
[
{
checked:false，
组件“:”，
create time : 2019-06-29 18:21:06 ，
create user : 026 a 564 bbfd 84861 ac4b 65393644 beef ，
图标“:”，
id:1503273153861066776 ，
名称:今天的集合(案例文件)，
open:true ，
parentId:2328050996633395469 ，
ParentName :主页，
权限: sys:index:vol ，
排序:103，
状态: 0 ，
类型: 2 ，
更新时间: 2021-01-27 15:51:15 ，
update user : 026 a 564 bbfd 84861 ac4b 65393644 beef ，
url“:”
}
]
定制v-has指令的配置
在utils文件夹下，创建一个新的hasPermission.js文件，并将其导出到index.js中
const hasPermission={
安装(Vue，选项){
Vue.directive(has ，{
已插入：(el，binding，vnode)={
filterGlobalPermission(el，binding，vnode)；
}
});
}
};
/**
* 全局权限控制
*/
export const filterGlobalPermission=(El，binding，vnode)={
let权限列表=[]；
设authList=JSON。解析(本地存储。getitem( log in _ USER _ BUTTON _ AUTH ) [])；
for (let auth of authList) {
许可列表。推送(auth)；
}
如果(!permissionList.length) {
埃尔。父节点。删除子项(El)；
返回；
}
let permissions=[]；
对于(权限列表的让项){
权限。推(项。许可)；
}
如果(!权限。包括(绑定。值)){
埃尔。父节点。删除子项(El)；
}
}
导出默认有权限
utils文件下的index.js
实用工具文件夹下的其他射流研究…文件也可以统一在索引。射流研究…里导出
导入具有来自的权限 hasPermission
导出{ hasPermission }
main.js中引入
从" @/实用工具"导入{ hasPermission }
Vue.use(有权限)
组件中使用v-has根据按钮权限，判断是否显示该按钮
El-button v-has= sys:arch:add type= primary size= mini icon= El-icon-plus @ click= add( 1 )
新增
/el-button
以上就是某视频剪辑软件自定义v-has指令，做按钮权限判断的步骤的详细内容，更多关于某视频剪辑软件自定义v-has指令的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。