First of all,

  • Know the width of the current element
  • Put the text in a container, set the style of the container (mainly font style) to the style of the current element, and get the width of the container, that is, the width of the text
  • If the width of the text exceeds the width of the current element, give the overflow a hidden CSS styleoverflow :hidden; text-overflow: ellipsis; white-space: normal
  • Define the mouse to display the floating layer, the floating layer to display all content, the mouse to destroy the floating layer

code

  • Global directives are defined in mian.js
  • Also available in componentsdirectives Central Registry department directive
Vue.directive('showTips', {
  // el {element} Current element
  componentUpdated (el) {
    const curStyle = window.getComputedStyle(el, ' ') // Get the style of the current element
    const textSpan = document.createElement('span') // Create a container to record the width of the text
    // Set the font style for the new container, making sure it is the same as the current style that needs to be hidden
    textSpan.style.fontSize = curStyle.fontSize
    textSpan.style.fontWeight = curStyle.fontWeight
    textSpan.style.fontFamily = curStyle.fontFamily
    // Insert the container into the body. If not, offsetWidth is 0
    document.body.appendChild(textSpan)
    // Set the text of the new container
    textSpan.innerHTML = el.innerText
    // If the font element is larger than the current element, it needs to be hidden
    if (textSpan.offsetWidth > el.offsetWidth) {
      // Set the current element beyond hiding
      el.style.overflow = 'hidden'
      el.style.textOverflow = 'ellipsis'
      el.style.whiteSpace = 'nowrap'
      // Mouse over
      el.onmouseenter = function (e) {
        // Create the float element and set the style
        const vcTooltipDom = document.createElement('div')
        vcTooltipDom.style.cssText = `
          max-width:400px;
          max-height: 400px;
          overflow: auto;
          position:absolute;
          top:${e.clientY + 5}px;
          left:${e.clientX}px;
          background: rgba(0, 0 , 0, .6);
          color:#fff;
          border-radius:5px;
          padding:10px;
          display:inline-block;
          font-size:12px;
          z-index:19999
        `
        // Set the id to easy to find
        vcTooltipDom.setAttribute('id'.'vc-tooltip')
        // Insert the float layer into the body
        document.body.appendChild(vcTooltipDom)
        // Float text
        document.getElementById('vc-tooltip').innerHTML = el.innerText
      }
      // Mouse over
      el.onmouseleave = function () {
        // Find the float element and remove it
        const vcTooltipDom = document.getElementById('vc-tooltip')
        vcTooltipDom && document.body.removeChild(vcTooltipDom)
      }
    }
    // Remember to remove the container you just created to record text
    document.body.removeChild(textSpan)
  },
  // when an instruction is unbound from an element
  unbind () {
    // Find the float element and remove it
    const vcTooltipDom = document.getElementById('vc-tooltip')
    vcTooltipDom && document.body.removeChild(vcTooltipDom)
  }
})
Copy the code
  • Use: direct add instructions that need overflow to hidev-show-tipsCan be
<div v-show-tips class="title-text">{{ name }}</div>
Copy the code

🍻 🍻