超出文本提示信息 =＞ vue 自定义指令

最新推荐文章于 2024-10-09 10:13:02 发布

该怎様释怀

最新推荐文章于 2024-10-09 10:13:02 发布

阅读量184

点赞数 2

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/CuiAndHani/article/details/120205493

版权

这是一个关于Vue自定义指令的示例，该指令在元素鼠标悬停时创建一个浮层提示，显示元素内的文本内容。当元素的scrollHeight大于clientHeight时，浮层会在鼠标位置附近显示，包含详细的文本信息，并在鼠标移出时自动移除。此代码片段主要涉及DOM操作、事件监听和CSS样式设置。

摘要由CSDN通过智能技术生成

import Vue from 'vue'
Vue.directive('showTips',{
  inserted(el) {
  },
  bind : function (el, binding, vnode) {
    el.onmouseenter = function (e) {
      console.log(el.scrollHeight);
      console.log(el.clientHeight);
      // if(el.scrollHeight>41){
      if(el.scrollHeight>el.clientHeight){
        // 创建浮层元素并设置样式
        const vcTooltipDom = document.createElement('div')
        // 设置id方便寻找
        vcTooltipDom.setAttribute('id', 'vc-tooltip')
        // 将浮层插入到body中
        document.body.appendChild(vcTooltipDom)
        // el.parentNode.appendChild(vcTooltipDom)
        // console.log('vcTooltipDom===',vcTooltipDom);
        // 浮层中的文字
        document.getElementById('vc-tooltip').innerHTML = el.innerText
        // console.log('高=====',vcTooltipDom.scrollHeight);
        vcTooltipDom.style.cssText = `
          max-width:800px;
          min-width:150px;
          overflow: auto;
          position: fixed;
          top:${e.clientY+20}px;
          left:${e.clientX - e.offsetX}px;
          background: rgba(0, 0 , 0, .6);
          color:#fff;
          border-radius:5px;
          padding:10px;
          line-height:20px;
          display:inline-block;
          font-size:12px;
          z-index:19999
        `
      }


    }
    // 鼠标移出
    el.onmouseleave = function () {
      const vcTooltipDom = document.getElementById('vc-tooltip')
      vcTooltipDom && document.body.removeChild(vcTooltipDom)

    }
  },
  unbind: function (el) {
    // 找到浮层元素并移除
    const vcTooltipDom = document.getElementById('vc-tooltip')
    vcTooltipDom && document.body.removeChild(vcTooltipDom)
  }
})