TextEllipsis 文本省略

介绍

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

必须通过custom-style属性指定font-size。

代码演示

基础用法

默认展示 1 行,超过 1 行显示省略号。

<z-text-ellipsis
  :content="text1"
  :custom-style="{ 'font-size': '26rpx' }"
/>
import { ref } from 'vue'
const text1 = ref(
  'zebra-swiper 是基于uniapp开发的一款适配多端的移动端轮播组件。'
)

展开/收起

超过行数支持展开/收起。

<z-text-ellipsis
  :content="text2"
  :custom-style="{ 'font-size': '26rpx' }"
  expand-text="展开"
  collapse-text="收起"
/>
const text2 = ref(
  'uniapp 的swiper组件存在很大的局限性,无法完成一些复杂的轮播效果。而zebra-swiper不仅可以实现一些3D轮播效果,还可以通过参数来定义你想要的效果。'
)

自定义展示行数

通过设置 rows 限制展示行数。

<z-text-ellipsis
  rows="3"
  :content="text3"
  :custom-style="{ 'font-size': '26rpx' }"
  expand-text="展开"
  collapse-text="收起"
/>
const text3 = ref(
  'zebra-swiper 是基于uniapp开发的一款移动端轮播组件。uniapp 的swiper组件存在很大的局限性,无法完成一些复杂的轮播效果。而zebra-swiper不仅可以实现一些3D轮播效果,还可以通过参数来定义你想要的效果。我们正在全面向swiperjs (opens new window)看齐,并且在小程序中,依然可以实现炫酷的轮播效果。'
)

自定义省略位置

通过设置 position 控制省略位置。

  • 头部省略:
<z-text-ellipsis
  rows="1"
  :content="text3"
  :custom-style="{ 'font-size': '26rpx' }"
  expand-text="展开"
  collapse-text="收起"
  position="start"
/>
const text3 = ref(
  'zebra-swiper 是基于uniapp开发的一款移动端轮播组件。uniapp 的swiper组件存在很大的局限性,无法完成一些复杂的轮播效果。而zebra-swiper不仅可以实现一些3D轮播效果,还可以通过参数来定义你想要的效果。我们正在全面向swiperjs (opens new window)看齐,并且在小程序中,依然可以实现炫酷的轮播效果。'
)
  • 中部省略:
<z-text-ellipsis
  rows="2"
  :content="text3"
  :custom-style="{ 'font-size': '26rpx' }"
  expand-text="展开"
  collapse-text="收起"
  position="middle"
/>
const text3 = ref(
  'zebra-swiper 是基于uniapp开发的一款移动端轮播组件。uniapp 的swiper组件存在很大的局限性,无法完成一些复杂的轮播效果。而zebra-swiper不仅可以实现一些3D轮播效果,还可以通过参数来定义你想要的效果。我们正在全面向swiperjs (opens new window)看齐,并且在小程序中,依然可以实现炫酷的轮播效果。'
)

自定义操作内容

通过插槽 action 自定义操作内容。

<z-text-ellipsis
  :content="text1"
  :custom-style="{ 'font-size': '26rpx' }"
>
  <template #action="{ expanded }">
    {{ expanded ? '收起' : '展开' }}
  </template>
</z-text-ellipsis>

API

Props

参数说明类型默认值
rows展示的行数number | string1
content需要展示的文本string-
expand-text展开操作的文案string-
collapse-text收起操作的文案string-
dots省略号的文本内容string'...'
position省略位置,可选值为 start middlestring'end'

Events

事件名说明回调参数
click-action点击展开/收起时触发event: MouseEvent

TextEllipsis 方法

通过 ref 可以获取到 TextEllipsis 实例并调用实例方法。

方法名说明参数返回值
toggle切换文本的展开状态,传 true 为展开,false 为收起,不传参为切换expanded?: boolean-

Slots

名称说明参数
action自定义操作

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
--z-text-ellipsis-action-colorvar(--z-blue)操作按钮的颜色
--z-text-ellipsis-line-height1.6文本的行高