✨HeyUI新组件：TextEllipsis多行省略✨✨

前言

我开发了
tree组件
超级日期组件
autocomplete组件
table组件

如此多的复杂组件，但是当遇到这种需求的时候，仍是一筹莫展。

两行文本，超出就...省略吧

话说，需求合理的不行，可是写起来酸爽无比...
css3的众多属性，咋就没有让我一行搞定的，多行也行了😭

也许你要说了，其实有这种属性的：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
复制代码

来来来，让咱们看下可歌可泣的兼容性：

IE，Edge，Firefox妥妥的一片红啊。
再看看知乎的专栏列表：

应该是按照字数计算的，良莠不齐。
还有下面的这种需求：

忍无可忍，看来只能本身出马了。

代码附上

<template>
  <TextEllipsis :text="text" :height="100" v-width="200">
    <span slot="before" class="h-tag h-tag-red">new</span>
    <span slot="more">...</span>
    <span slot="after">[09/14]</span>
  </TextEllipsis>
</template>

<script> export default { data() { return { text:"《华盛顿自由灯塔报》几天前报道称，美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动，此次试射中东-41导弹投射了多个弹头并成功命中中国西部靶场目标。" } } } </script>
复制代码

TextEllipsis组件，分四个组成部分：

• before
• more
• after
• text

组合任意调用，并且当执行收缩的时候，还给事件，防止更加变态的需求。

还扩展出下面的这种应用方式：

话很少说，连接给出来：
www.heyui.top/component/o…

HEYUI

同时，也但愿愈来愈多的人支持咱们的项目：HEYUI

但愿有更多精彩的组件提供给你们。