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>

显示遮罩层

通过 showMask 属性可以在折叠时显示一个遮罩层。

<template>
  <TextEllipsis 
    text="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。"
    :expandable="true"
    :lines="3"
    :showMask="true"
    maskColor="rgba(255, 255, 255, 0.8)"
  />
</template>

自定义内容

通过 customContent 属性和默认插槽可以自定义内容渲染。

<template>
  <TextEllipsis 
    :expandable="true"
    :customContent="true"
    :collapsedHeight="200"
  >
    <div>
      <h3>自定义内容标题</h3>
      <p>这是一段自定义内容，包含多个元素。这是一段自定义内容，包含多个元素。这是一段自定义内容，包含多个元素。</p>
      <p>这是第二段自定义内容，包含多个元素。这是第二段自定义内容，包含多个元素。这是第二段自定义内容，包含多个元素。</p>
      <p>这是第三段自定义内容，包含多个元素。这是第三段自定义内容，包含多个元素。这是第三段自定义内容，包含多个元素。</p>
    </div>
  </TextEllipsis>
</template>

自定义折叠高度

通过 collapsedHeight 属性可以设置折叠时的高度，需要搭配 customContent 属性在自定义内容渲染时使用。

<template>
  <TextEllipsis 
    text="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。"
    :expandable="true"
    :customContent="true"
    :collapsedHeight="100"
  />
</template>

API 参考

TextEllipsis

文本省略组件。

Props

名称	说明	类型	必填	默认值
text	要显示的文本内容	string	-	-
lines	文本显示的行数	number	-	1
expandable	是否支持展开/收起	boolean	-	true
startOpen	初始状态是否展开	boolean	-	false
openText	展开按钮的文字	string	-	'展开'
closeText	收起按钮的文字	string	-	'收起'
showMask	是否显示遮罩层，当定义了该属性时，折叠时将会显示一个遮罩层	boolean	-	false
maskColor	遮罩层颜色	string	-	'white'
collapsedHeight	折叠时的高度	number	-	140
customContent	是否自定义内容，当定义了该属性时，可以通过slot自定义内容渲染，折叠时将会设置高度为collapsedHeight	boolean	-	false

Slots

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

Events

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