本文主要讲解“如何通过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