✨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

希望有更多精彩的元件提供給大家。