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