vue -权限管理-指令-v-permission

const permissionsList = ['news_add', "news_import", "news_export"]
const permissions = {
    inserted(el, binding, vnode, oldVnode) {
        let { value } = binding
        console.log(value)
        if (Array.isArray(value) ) {
            if(!value.length){
                throw "v-permission 对应数组值不能为空";
            } 
            console.log(isArrayEqual(permissionsList, value))
            if (!isArrayEqual(permissionsList, value)) {
                el & el.remove()
            }
        }else if(typeof(value)=='string'){
            if(!permissionsList.includes(value)){
                el & el.remove()
            }
        }else{
            throw "v-permission 类型只能为数据或者字符串";
        }
        // if (value !== "read") {
        //     el & el.remove()
        // }
    }
}
 
 
export default permissions
 
 
function isArrayEqual(arr1, arr2) {
    return arr2.some(item=>{
        return arr1.includes(item)
    })
}

import permissions from "./permissions"
// import fontRed from "./font-red";
// import style from "./style";
 
const install = function (Vue) {
    Vue.directive('permissions', permissions)
//     Vue.directive('font-red', fontRed)
//     Vue.directive('style', style)
}
 
export default install

   <el-button type="primary" size="mini" @click="showModal('add')" v-permissions="'news_add'">
          <svg-icon icon-class="new-add" class="new-add" />&nbsp;&nbsp; 新增
        </el-button>

directive
        index.js
        permission.js
main.js|
import directive from "@/directive"
Vue.use(directive)

import Vue from 'vue'
import DefaultImage from '../images/default-image.png'
const LOCALPATH = 'http://127.0.0.1/'
const CDNPATH = 'http://www.baidu.com/'
Vue.directive('bigSoure', {
    inserted: function (el) {
        el.addEventListener('error', (e) => {
            if (el.getAttribute('data-setUrl')) {
                el.setAttribute('data-setUrl', true)
                e.src = CDNPATH + el.src.split(LOCALPATH)[0]
                console.log('本地没得，用的cdn')
            }
        })
    }
})
 
   
// 大概意思 没写好 在inserted 给他去掉就行
Vue.directive("img", {
    bind: function (el) {
        // var color = Math.floor(Math.random() * 1000000);
        // el.style.backgroundColor = "#" + color;
        el.style.backgroundImage = "url(" + DefaultImage + ")"; //骨架屏
    },
    inserted: function (el, binding) {
        var img = new Image();
        img.src = binding.value;
        img.onload = function () {
            el.style.backgroundImage = "url(" + binding.value + ")";
        };
    },
});