按钮权限
import Vue from 'vue'
import router from '@/router'
import {btnPermissionCheck} from "@/network/common/common";
Vue.directive('permission', {
inserted: async function(el, binding){
el.style.display='none';
const code = binding.value.code
let show = binding.value.show//有的按钮需根据state/status判断是否展示,当不传值时默认显示,不这样的话所有按钮都会显示两遍
if(show=== void 0)show=true
const currentRight = router.currentRoute.meta;
if(currentRight) {
let res=await btnPermissionCheck({code:'99'+code,platformId:11,routeId:currentRight.routerId});
if(show&&res.code===200&&res.data){
el.style.display='inline-block';
}
}
}
})
使用方法
<span class="table_font_Btn" @click="handleRow('EDIT',record)" v-permission="{code:'11080303',show:record.status==0?true:false}">编辑</span>
输入数字
Vue.directive('integer', {
bind (el, binding, vnode) {
var input = el.getElementsByTagName('input')[0]
input.addEventListener('input', function () {
var val = input.value
var regex = /^[1-9]\d*$/
if (!regex.test(val)) {
input.value = val.replace(/[^\d]/g, '')
vnode.context[binding.expression] = parseInt(input.value)
} else {
vnode.context[binding.expression] = parseInt(input.value)
}
})
}
})
省略 自定义指令
Vue.directive('ellipsis', {
inserted (el) {
toolTip(el)
},
componentUpdated (el) {
toolTip(el)
},
unbind () {
const kxmTooltipDom = document.getElementById('kxm-tooltip');
kxmTooltipDom && document.body.removeChild(kxmTooltipDom);
}
})
const toolTip = (el) => {
const curStyle = window.getComputedStyle(el, '')
const textSpan = document.createElement('span')
textSpan.style.fontSize = curStyle.fontSize
textSpan.style.fontWeight = curStyle.fontWeight
textSpan.style.fontFamily = curStyle.fontFamily
document.body.appendChild(textSpan)
textSpan.innerHTML = el.innerText
if (textSpan.offsetWidth > el.offsetWidth) {
el.style.overflow = 'hidden'
el.style.textOverflow = 'ellipsis'
el.style.whiteSpace = 'nowrap'
el.onmouseenter = (e) => {
const kxmTooltipDom = document.createElement('div')
kxmTooltipDom.style.cssText = `
display: inline-block;
max-width: 400px;
max-height: 400px;
position: absolute;
top: ${e.clientY + 5}px;
left: ${e.clientX}px;
padding: 10px;
overflow: auto;
font-size: 14px;
color: #fff;
background: rgba(0, 0 , 0, .6);
border-radius: 5px;
z-index: 19999
`
kxmTooltipDom.setAttribute('id', 'kxm-tooltip')
document.body.appendChild(kxmTooltipDom)
document.getElementById('kxm-tooltip').innerHTML = el.innerText
}
el.onmouseleave = () => {
const kxmTooltipDom = document.getElementById('kxm-tooltip')
kxmTooltipDom && document.body.removeChild(kxmTooltipDom)
}
}
document.body.removeChild(textSpan)
}
无图片
/** 指令注册 */
/**
* @description 图片报错时候的默认图片
* @example <img v-on-image></img>
*/
Vue.directive('no-image', {
inserted: function (el) {
el.onerror = function() {
el.src = require('@/assets/image/empty.png')
}
}
})
自定义指令点击文本组件内不关闭面板点击其他区域关闭
directives:{
//自定义指令点击文本组件内不关闭面板点击其他区域关闭
clickShow: {
inserted(el){
el.querySelector('input').focus()
},
bind(el, binding,vnode) {
el.focus()
const documentHandler = (e) => {
if (!el.contains(e.target)) {
let index = el.childNodes[1].getAttribute('attrIndex');
vnode.context.recordList[index].isShowInput = false;
}
}
el.documentHandler= documentHandler
document.addEventListener('click', documentHandler, false)
},
unbind(el) {
console.log('unbind')
document.removeEventListener('click', el.documentHandler, false)
delete el.documentHandler
}
}
},