vue自定义指令

按钮权限

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
      }
    }
  },