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 + ")";
        };
    },
});



 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值