灵感：VUE2实现权限按钮控制

运用场景； 根据权限码，实现判断当前用户是否能控制权限按钮

一、在main.JS 里面写入全局指令《自定义权限按钮》

// S 自定义按钮权限
Vue.directive('has', {
    inserted: function(el, binding) {
        const buttonList = JSON.parse(localStorage.getItem('buttonList'))
        const value = binding.value
        let hasPermission = false // 默认初始权限为空
        buttonList.map(item => {
            if (item.permissionCode === value) {
                hasPermission = true
            }
        })
        if (!hasPermission) {
            el.style = 'display:none'
            setTimeout(() => {
                el.parentNode.removeChild(el)
            }, 0)
        }
    }
})
// E 自定义按钮权限

在上面的代码中，

1、每次进入页面，会拿到该页面有哪些按钮标识码·binding.value·

2、遍历按钮标识列表·buttonList· ；

3、如果按钮标识列表与页面按钮标识码存在一致；则显示该按钮

二、调用

 
"'permission@create'" >新增用户
 
<el-button v-has="'permission@delete'" >删除用户el-button>

三、参考链接：

应用实例 API | Vue.js