TextEllipsis 文本省略

介绍

对长文本进行省略，支持展开/收起。

导入

import TextEllipsis from '@/components/display/TextEllipsis.vue'

用法

基础用法

基础的文本省略功能，默认只显示一行。

<template>
  <TextEllipsis text="这是一个很长的文本，超过了一行的显示范围。这是一个很长的文本，超过了一行的显示范围。这是一个很长的文本，超过了一行的显示范围。" />
</template>

可以展开/收起

通过 expandable 属性可以使文本支持展开/收起功能。

<template>
  <TextEllipsis 
    text="似水流年是一个人所有的一切，只有这个东西，才真正归你所有。其余的一切，都是片刻的欢娱和不幸，转眼间就已跑到那似水流年里去了"
    :expandable="true"
  />
</template>

自定义展示行数

通过 lines 属性可以设置文本的默认展示行数。

<template>
  <TextEllipsis 
    text="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。"
    :expandable="true"
    :lines="5"
  />
</template>

API 参考

TextEllipsis

文本省略组件。

Props

名称	说明	类型	必填	默认值
text	要显示的文本内容	string	-	-
lines	文本显示的行数	number	-	1
expandable	是否支持展开/收起	boolean	-	false
startOpen	初始状态是否展开	boolean	-	false
openText	展开按钮的文字	string	-	'展开'
closeText	收起按钮的文字	string	-	'收起'

Slots

名称	说明
default	自定义文本内容
button	自定义展开/收起按钮

Events

名称	说明	参数
expand	文本展开时触发	$event
collapse	文本收起时触发	$event