TextEllipsis

introduce

Omit long text and support expansion/collapse.

Font-size must be specified through the custom-style attribute.

Basic usage

By default, 1 lines are displayed, and ellipses are displayed for more than 1 lines.

<z-text-ellipsis
   :content="text1"
   :custom-style="{ 'font-size': '26rpx' }"
/>

import { ref } from 'vue'
const text1 = ref(
   'zebra-swiper is a multi-terminal mobile carousel component developed based on uniapp. '
)

Expand/Collapse

Exceeding the number of rows supports expansion/collapse.

<z-text-ellipsis
   :content="text2"
   :custom-style="{ 'font-size': '26rpx' }"
   expand-text="Expand"
   collapse-text="Collapse"
/>

const text2 = ref(
   'Uniapp's swiper component has great limitations and cannot complete some complex carousel effects. Zebra-swiper can not only achieve some 3D carousel effects, but also define the effects you want through parameters. '
)

Customize the number of display rows

Limit the number of displayed rows by setting rows.

<z-text-ellipsis
   rows="3"
   :content="text3"
   :custom-style="{ 'font-size': '26rpx' }"
   expand-text="Expand"
   collapse-text="Collapse"
/>

const text3 = ref(
   'zebra-swiper is a mobile carousel component developed based on uniapp. The swiper component of uniapp has great limitations and cannot complete some complex carousel effects. Zebra-swiper can not only achieve some 3D carousel effects, but also define the effects you want through parameters. We are fully aligned with swiperjs (opens new window), and we can still achieve cool carousel effects in mini programs. '
)

Custom omitted position

Control the omitted position by setting position.

• Header omitted:

<z-text-ellipsis
   rows="1"
   :content="text3"
   :custom-style="{ 'font-size': '26rpx' }"
   expand-text="Expand"
   collapse-text="Collapse"
   position="start"
/>

const text3 = ref(
   'zebra-swiper is a mobile carousel component developed based on uniapp. The swiper component of uniapp has great limitations and cannot complete some complex carousel effects. Zebra-swiper can not only achieve some 3D carousel effects, but also define the effects you want through parameters. We are fully aligned with swiperjs (opens new window), and we can still achieve cool carousel effects in mini programs. '
)

• Omit the middle part:

<z-text-ellipsis
   rows="2"
   :content="text3"
   :custom-style="{ 'font-size': '26rpx' }"
   expand-text="Expand"
   collapse-text="Collapse"
   position="middle"
/>

const text3 = ref(
   'zebra-swiper is a mobile carousel component developed based on uniapp. The swiper component of uniapp has great limitations and cannot complete some complex carousel effects. Zebra-swiper can not only achieve some 3D carousel effects, but also define the effects you want through parameters. We are fully aligned with swiperjs (opens new window), and we can still achieve cool carousel effects in mini programs. '
)

Custom operation content

Customize the action content through the slot action.

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

Props

Events

TextEllipsis method

Through ref, you can get the TextEllipsis instance and call the instance method.

Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.