-
首先是拿到数据, 在后台中, 一般进行权限控制, 是根据用户获取对应的数据, 这边我就直接在vuex中写一个固定数据
在state中直接定义这三个按钮类型 自定义指令, 用来判断按钮是否展示, 创建 has.js 文件
export default{
inserted(el, bindings, vnode) {
// 当前按钮传递的值( v-has="'add'" 中的值)
let currentTag = bindings.value
// 获取到存放在 store 中的数据
let btnList = vnode.context.$store.state.promiseBtn
// 判断是否存在对应的按钮权限
let item = btnList.filter((item) => {
return item === currentTag
})
// 没有则删除该按钮 (el.parentNode 获取当前节点的父节点)
if(item.length === 0) {
el.parentNode.removeChild(el);
}
}
}
- 在页面中使用按钮时, 用上自定义的 v-has 指令
image.png
