vue中的按钮权限控制

• 首先是拿到数据, 在后台中, 一般进行权限控制, 是根据用户获取对应的数据, 这边我就直接在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