Vue指令实现文字省略功能

前提

在前端开发中，文字太多超出显示范围的情况还是比较常见，如果只是显示一行或者多行的话，可以使用css来进行省略,如下：

//单行省略
<style>
  .single-line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px; /* 根据需要设置元素的宽度 */
  }
</style>

<div class="single-line-ellipsis">
  <!-- 单行文本内容 -->
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

//多行省略
<style>
  .multiline-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3; /* 控制显示的行数 */
    line-height: 1.5; /* 设置行高，可根据需要进行调整 */
    max-height: 4.5em; /* 根据行高和展示行数计算得出，例如：line-height * 行数 */
  }
</style>

<div class="multiline-ellipsis">
  <!-- 多行文本内容 -->
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis euismod sem, sed faucibus est bibendum id. Donec a lectus in risus ultrices tristique. Etiam sollicitudin tempor neque vitae ullamcorper.
</div>

现在准备使用Vue指令，来实现上面的效果，另外加入‘展开’和‘收起’功能。
使用方式：

<div v-textEllipsis="3" :date-content="text" :title="text">{{ text }}</div>

  directives: {
    textEllipsis: {
      update(el, binding, vnode) {
      //获取行高
        const lineHeight = parseFloat(window.getComputedStyle(el, null).getPropertyValue('line-height'))
        //显示几行，默认3行，才开始进行截取字符串显示省略号
        const lineRows = binding.value || 3
        //计算 要显示的行数 总行高是多少
        const maxHeight = parseFloat(lineHeight * lineRows)
        //文字大小是多少
        const font = parseFloat(window.getComputedStyle(el, null).getPropertyValue('font-size'))
        //文本的全部总行高
        let contentHeight = el.offsetHeight
        //如果文本内容的行高超出要显示的行数，就进行截取隐藏
        if (contentHeight > maxHeight && el.textContent.length > 0) {
          const fontSize = font || 16
          //计算要显示的行数需要多少文字
          const fontNumber = Math.floor((el.offsetWidth / fontSize) * lineRows - 5)
          //进行截取
          el.textContent = el.textContent.slice(0, fontNumber)
          contentHeight = el.offsetHeight - lineHeight
          //增加 '展开'和'收起'功能
          const span = document.createElement('span')
          el.innerHTML = el.textContent + '...'
          span.innerText = '展开'
          span.style.display = 'inline-block'
          span.style.paddingLeft = '5px'
          span.style.cursor = 'pointer'
          span.style.color = '#1D5ACC'
          span.classList.add('expand-span')
          el.appendChild(span)
          span.addEventListener('click', function() {
            const text = span.textContent
            if (text === '展开') {
            //这里可以把文本全部内容，放到标签属性上'data-content'或者'title'上
            //用来还原全部内容
              const content = el.getAttribute('data-content') || el.getAttribute('title')
              el.innerHTML = content
            } else {
              el.innerHTML = el.textContent.slice(0, fontNumber) + '...'
            }
            span.innerText = text === '展开' ? '收起' : '展开'
            el.appendChild(span)
          })
        }
      }
    }
  },