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>

Props

Events

TextEllipsis 方法

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

Slots

样式变量

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