vue自定义指令

vue自定义指令

import Vue from 'vue'
const Directive = {}

// v-Int：针对 el-input 做的限制，只能输入正整数
Directive.Int = () => {
  Vue.directive('Int', {
    inserted: (el) => {
      const input = el.getElementsByTagName('input')[0]
      input.onkeyup = () => {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.replace(/[^\d]/g, '')
        }
        trigger(input, 'input')
      }
      input.onblur = () => {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.replace(/[^\d]/g, '')
        }
        trigger(input, 'input')
      }
    }
  })
}
const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}

// 注册一个全局自定义指令 `v-decimal` (设置限制仅可以输入两位小数)
Directive.decimal = () => {
  Vue.directive('decimal', {
    inserted: (el) => {
      const input = el.getElementsByTagName('input')[0]
      input.onkeyup = () => {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.match(/^\d*(\.?\d{0,2})/g)[0] || null
        }
        trigger(input, 'input')
      }
      input.onblur = () => {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.match(/^\d*(\.?\d{0,2})/g)[0] || null
        }
        trigger(input, 'input')
      }
    }
  })
}

// v-show-tips: 实现文字溢出显示...鼠标移入浮层展示全部
Directive.showTips = () => {
  Vue.directive('showTips', {
    bind(el, binding) {
      setTimeout(() => {
        const curStyle = window.getComputedStyle(el, '') // 获取当前元素的style
        const textSpan = document.createElement('span') // 创建一个容器来记录文字的width
        // 设置新容器的字体样式，确保与当前需要隐藏的样式相同
        textSpan.style.fontSize = curStyle.fontSize
        textSpan.style.fontWeight = curStyle.fontWeight
        textSpan.style.fontFamily = curStyle.fontFamily
        // 将容器插入body，如果不插入，offsetWidth为0
        document.body.appendChild(textSpan)
        // 设置新容器的文字
        textSpan.innerHTML = el.innerText
        // 如果字体元素大于当前元素，则需要隐藏; 手动指定超出宽度：binding.value.width
        if (textSpan.offsetWidth > (el.offsetWidth || binding.value?.width)) {
          // 给当前元素设置超出隐藏
          el.style.overflow = 'hidden'
          el.style.textOverflow = 'ellipsis'
          el.style.whiteSpace = 'nowrap'
          el.style.cursor = 'default'
          el.style.paddingRight = '20px'
          // 鼠标移入
          el.onmouseenter = function (e) {
            // 创建浮层元素并设置样式
            const vcTooltipDom = document.createElement('div')
            vcTooltipDom.style.cssText = `
              max-width: 400px;
              overflow: auto;
              position: absolute;
              top: ${e.clientY + 5}px;
              left: ${e.clientX}px;
              background: rgba(0, 0 , 0, .6);
              color: #fff;
              border-radius: 4px;
              padding: 6px 10px;
              display: inline-block;
              font-size: 12px;
              word-break :break-all;
              z-index: 9999;
            `
            // 设置id方便寻找
            vcTooltipDom.setAttribute('id', 'vc-tooltip')
            // 将浮层插入到body中
            document.body.appendChild(vcTooltipDom)
            // 浮层中的文字
            document.getElementById('vc-tooltip').innerHTML = el.innerText
          }
          // 鼠标移出
          el.onmouseleave = function () {
            // 找到浮层元素并移出
            const vcTooltipDom = document.getElementById('vc-tooltip')
            vcTooltipDom && document.body.removeChild(vcTooltipDom)
          }
        }
        // 记得移除刚刚创建的记录文字的容器
        document.body.removeChild(textSpan)
      }, binding.value?.delay || 0)
    },
    // 指令与元素解绑时
    unbind() {
      // 找到浮层元素并移除
      const vcTooltipDom = document.getElementById('vc-tooltip')
      vcTooltipDom && document.body.removeChild(vcTooltipDom)
    }
  })
}

export default Directive