【VUE】常用自定义指令


1. 超出显示tooptips

export const title = {
  inserted: function(el,binding) {
    let tooltip = document.createElement('div')
    // tooltip.className = 'tooltip tooltip-top'
    tooltip.className = 'tooltip ' + (binding.value || 'tooltip-top')
    document.body.appendChild(tooltip)
    el.className = el.className + ' ellipsis'
    el.addEventListener('mouseenter', e => {
      let curtarget = e.currentTarget
      if (curtarget.clientWidth != curtarget.scrollWidth) {
        let left = curtarget.offsetLeft - curtarget.scrollLeft
        let top = curtarget.offsetTop - curtarget.scrollTop
        let temp = curtarget
        while (temp?.offsetParent) {
          let tempOther = temp
          while (temp.offsetParent !== tempOther.parentElement) {
            left = left - tempOther.parentElement.scrollLeft
            top = top - tempOther.parentElement.scrollTop
            tempOther = tempOther.parentElement
          }
          //兼容transfrom偏移
          let translates = document.defaultView.getComputedStyle(temp.offsetParent,null).transform;
          let translateX = translates.includes('matrix')?parseFloat(translates.substring(6).split(',')[4]):0;
          let translateY = translates.includes('matrix')?parseFloat(translates.substring(6).split(',')[5]):0;
          left = left + temp.offsetParent.offsetLeft - temp.offsetParent.scrollLeft + translateX
          top = top + temp.offsetParent.offsetTop - temp.offsetParent.scrollTop + translateY
          temp = temp?.offsetParent
        }
        tooltip.style.left = left + curtarget.clientWidth / 2 + 'px'
        tooltip.style.top = top + 'px'
        tooltip.style.zIndex = 99999
        tooltip.innerHTML = curtarget.innerText
        // tooltip.className = 'tooltip tooltip-top show'
        tooltip.className = 'tooltip show ' + (binding.value || 'tooltip-top')
      }
    })
    el.addEventListener('mouseleave', e => {
      // tooltip.className = 'tooltip tooltip-top'
      tooltip.className = 'tooltip ' + (binding.value || 'tooltip-top')
    })
  },
}

2. 禁止连续点击

//传参:1000毫秒内禁止连续点击
//<div @click='addNum' v-points="1000"></div>
//不传参:默认350毫秒
//<div @click='addNum' v-points></div>
export const points = {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      el.style.pointerEvents = 'none'
      setTimeout(() => {
        el.style.pointerEvents = 'auto'
      }, binding.value || 350)
    })
  },
}

3. 跟随鼠标位置 显示tooptip

export const title2 = {
  inserted: function(el) {
    let tooltip = document.createElement('div')
    tooltip.className = 'tooltip tooltip-top'
    document.body.appendChild(tooltip)
    el.className = el.className + ' ellipsis'
    el.addEventListener('mouseenter', e => {
      let curtarget = e.currentTarget
      if (curtarget.clientWidth != curtarget.scrollWidth) {
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft //分别兼容ie和chrome
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop
        var left = e.pageX || e.clientX + scrollX //兼容火狐和其他浏览器
        var top = e.pageY || e.clientY + scrollY
        tooltip.style.left = left + 'px'
        tooltip.style.top = top - 5 + 'px'
        tooltip.style.zIndex = 99999
        tooltip.innerHTML = curtarget.innerText
        tooltip.className = 'tooltip tooltip-top show'
      }
    })
    el.addEventListener('mouseleave', e => {
      tooltip.className = 'tooltip tooltip-top'
    })
  },
}

声明:yopaopao|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 【VUE】常用自定义指令


正如我心中爱你美丽 又怎能嘴上装四大皆空