vue权限控制按钮显示隐藏(vue按钮级别权限控制)

技术vue按钮怎么实现权限控制这篇文章主要讲解了“vue按钮怎么实现权限控制”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue按钮怎么实现权限控制”吧!一、步骤1.定义

本文主要讲解“如何通过vue按钮实现权限控制”。本文的解释简单明了,易学易懂。请跟随边肖的思路一起学习学习《如何通过vue按钮实现权限控制》!

00-1010

一、步骤

在保存后台界面返回的权限数据的状态下创建buttomPermission。

SetPermission用于接受数据,并将页面权限管理传递给buttomPermission对象。

使用vuex:

Vue.use(Vuex)

创建vue实例

conststore=newVuex。商店({ 0

状态:{

但是许可:{}

},

突变:{

设定权限(状态,权限){ 0

state.buttomPermission=权限

}

}

})

export default store

1.定义buttom权限

import store from '。/store/index.js '

newVue({ 0

商店,

el:'#app ',

render:h=h(App)

})

2.定义store

创建一个新的指令文件夹并创建permission.js文件。

这里,使用insert函数检查绑定元素在插入父节点时是否具有权限。

Inserted,bindings,vnode) {}

3.创建permission指令

在按钮页面中引入并定义了权限指令,并将该指令写入buttom,以绑定指令中的相对值。

Buttonv-permission=“添加”添加/按钮

importpermissionfrom“”。“指令/许可”

指令: {permission,},

4.使用permission指令

在permission指令中,通过bindings获取按钮绑定的值,然后在buttomPermission对象中找到,然后判断是否有权限,如果没有权限,则删除该节点。

已插入(el、绑定、vnode){ 0

letbtnpermission value=bindings . value;

letboolean=vnode . context . $ store . state . but complemission[btnpermission value];

!booleanel . parent node . remove child(El);

}

5.删除无权限数据

通过setPermission方法将状态管理数据传递到权限管理中。

letpermissions={}

这个。$store.commit('setPermission ',权限);00-1010一般来说是通过vuex定义一个buttomPermission状态对象,然后创建一个权限指令。通过对每个按钮使用权限指令,有必要绑定按钮的特定值。然后,在permission.js文件中,获取当前值,从buttomPermission中获取当前按钮是否有权限;如果没有,直接删除当前按钮节点。

感谢阅读。以上就是“如何用vue按钮控制权限”的内容。看完这篇文章,相信你对如何用vue按钮控制权限有了更深的理解,具体用法还需要实践验证。在这里,边肖将为您推送更多关于知识点的文章,敬请关注!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/156262.html

(0)

相关推荐

  • srvctl怎样添加新的监听和端口并静态注册

    技术srvctl怎样添加新的监听和端口并静态注册本篇文章给大家分享的是有关srvctl怎样添加新的监听和端口并静态注册,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来

    攻略 2021年11月30日
  • java基础知识回顾之java Thread类学习,二)--java多线程安全问题,锁)

    技术java基础知识回顾之java Thread类学习,二)--java多线程安全问题,锁) java基础知识回顾之java Thread类学习(二)--java多线程安全问题(锁)上一节售票系统中我们

    礼包 2021年12月23日
  • 简述storm的拓扑结构(storm拓扑原理)

    技术storm怎么构建拓扑代码这篇文章主要讲解了“storm怎么构建拓扑代码”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“storm怎么构建拓扑代码”吧!1. 构建拓扑

    攻略 2021年12月23日
  • 度和千瓦时换算,度和千瓦时的换算是怎么的啊

    技术度和千瓦时换算,度和千瓦时的换算是怎么的啊千瓦时就是平时所说的“度”度和千瓦时换算,是电功的单位。瓦特是功率的单位。如果在功率上再乘以一个时间,那么这个结果就是功。1焦=1瓦×秒1千瓦时=1千瓦×1小时=1000瓦×

    生活 2021年10月25日
  • VB.NET中ListView控件怎么用

    技术VB.NET中ListView控件怎么用这篇文章主要介绍了VB.NET中ListView控件怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。VB.

    攻略 2021年12月1日
  • redis有哪些内存淘汰策略如何配置(redis中线程安全的方法)

    技术Redis中线程IO模型是什么这篇文章将为大家详细讲解有关Redis中线程IO模型是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Redis是一个单线程的应用程序,NodeJs

    攻略 2021年12月21日