其他分享
首页 > 其他分享> > vue通过自定义指令控制按钮的权限

vue通过自定义指令控制按钮的权限

作者:互联网

1、store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    buttonPermission: {
      add: true,
      edit: true,
      delete: false
    }
  }
})

2、directives/has.js:

export default {
  inserted(el, bindings, vnode) {
    const btnVal = bindings.value
    const boolean = vnode.context.$store.state.buttonPermission[btnVal]
    !boolean && el.parentNode.removeChild(el)
  }
}

3、使用指令

<template>
  <div id="app">
    <button v-has="'add'">添加</button>
    <button v-has="'edit'">编辑</button>
    <button v-has="'delete'">删除</button>
  </div>
</template>
<script>
import has from '@/directives/has'
export default {
  directives:{has}
}
</script>

  将按钮的英文传入到指令中,在指令的回调中将该按钮在vuex中的状态(true/false)找到,如果是false,通过父级节点将该节点删除

 

标签:el,vue,false,自定义,import,export,按钮,directives,true
来源: https://www.cnblogs.com/wuqilang/p/15126098.html