✨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

希望有更多精彩的组件提供给大家。