vue 文字溢出点击省略号展示更多

Vue 可以通过 CSS 和内置指令 v-text-overflow 来实现文字溢出后点击省略号展示更多的效果。

首先，可以定义一个包含溢出文本的容器，并限制其宽度和高度，使得文本溢出时可以产生省略号。例如：

<div class="text-container">
  {{ longText }}
</div>

然后，通过 CSS 样式来设置溢出文本的省略号和点击展示更多的特效：

.text-container {
  overflow: hidden; /* 溢出内容隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap; /* 不换行 */
  width: 200px; /* 容器宽度 */
  height: 20px; /* 容器高度 */
}

.text-container:hover {
  overflow: visible; /* 鼠标悬停时展示全部内容 */
  height: auto; /* 自动调整高度以完整显示文本 */
}

最后，在 Vue 中使用 v-text-overflow 指令将文本绑定到容器中，并通过鼠标事件来切换展示状态：

<div class="text-container" v-text-overflow="longText"></div>

Vue.directive('text-overflow', {
  inserted: function (el, binding) {
    el.textContent = binding.value;
    el.addEventListener('mouseover', function () {
      el.style.overflow = 'visible';
      el.style.height = 'auto';
    });
    el.addEventListener('mouseleave', function () {
      el.style.overflow = 'hidden';
      el.style.height = '20px';
    });
  },
});

通过以上代码，在文本溢出时，鼠标悬停在容器上时将展示全部文本，移开鼠标时将再次显示省略号。这样，就实现了通过点击省略号展示更多文本的效果。