vue实现按钮权限,vue按钮权限自定义指令

　　本文主要介绍vue按钮的权限控制。在日常项目中，需要根据后台接口返回的数据来判断当前用户的操作权限。当有删除权限时，将显示删除按钮。下面就来了解一下具体的解决方案，有需要的朋友也可以参考一下。

一、步骤

1.定义buttom权限

　　在状态下创建buttomPermission，保存后台接口返回的权限数据。

　　SetPermission用于接受数据并将页面权限管理转移到buttomPermission对象中。

　　使用vuex：

　　Vue.use(Vuex)

　　创建一个vue实例

　　const store=new Vuex。商店({

　　状态：{

　　buttomPermission: {}

　　突变：{

　　setPermission(状态，权限){

　　state . buttompermission=permission

　　}

　　})

　　导出默认存储

2.定义store

　　从导入存储。/store/index.js

　　新Vue({

　　店，

　　埃尔： #app ，

　　render: h=h(App)

　　})

3.创建permission指令

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

　　这里，inserted函数用于检查绑定元素在插入父节点时是否有权限。

　　已插入(el，bindings，vnode ) { }

4.使用permission指令

　　在按钮页面中引入并定义权限指令，在button中编写指令绑定相对于的值。

　　按钮v-permission=添加添加/按钮

　　从导入权限。/指令/权限

　　指令：{permission，}，

5.删除无权限数据

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

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

　　let btnPermissionValue=bindings . value；

　　let boolean=vnode . context . $ store . state . buttompermission[BTN permission value]；

　　！布尔型El . parent node . remove child(El)；

　　}

6.传入状态管理数据

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

　　let权限={}

　　这个。$store.commit(setPermission ，permissions)；

二、概况

　　一般来说就是通过vuex定义一个buttomPermission状态对象，然后创建一个权限指令。通过对每个按钮使用权限指令，它绑定了按钮的特定值。然后在permission.js文件中，获取当前值，从buttomPermission获取当前按钮是否有权限。如果没有，直接删除当前按钮节点。

　　关于vue按钮权限控制介绍的这篇文章到此为止。更多关于vue按钮权限控制的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。