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