✨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

但願有更多精彩的組件提供給你們。