外观
Ellipsis 文本省略
约 735 字大约 2 分钟
2025-10-31
文本过长时,自动省略多余的文本。支持展开/收起功能,可以设置省略位置、自定义省略符号等。
平台差异说明
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| √ | X | √ | √ |
基本使用
最简单的用法,超出指定行数时自动显示省略号。
<template>
<u-ellipsis
content="这是一段很长的文本内容,用来演示省略号组件的基本功能。当文本超出指定行数时,会自动显示省略号。"
/>
</template>展开收起
设置 expand-text 和 collapse-text 属性,可以实现展开收起功能。
<template>
<u-ellipsis
expand-text="展开"
collapse-text="收起"
content="这是一段很长的文本内容,用来演示省略号组件的展开收起功能。当文本超出指定行数时,会自动显示省略号,点击展开按钮可以查看完整内容。"
:rows="2"
/>
</template>省略位置
通过 position 属性可以设置省略位置,支持 start(头部省略)、end(尾部省略,默认)、middle(中间省略)。
<template>
<view>
<!-- 头部省略 -->
<u-ellipsis
content="这是一段很长的文本内容,用来演示省略号组件的头部省略功能。"
position="start"
expand-text="展开"
collapse-text="收起"
/>
<!-- 中间省略 -->
<u-ellipsis
content="这是一段很长的文本内容,用来演示省略号组件的中间省略功能。"
position="middle"
expand-text="展开"
collapse-text="收起"
/>
</view>
</template>自定义省略符号
通过 symbol 属性可以自定义省略符号。
<template>
<u-ellipsis
content="这是一段很长的文本内容,用来演示省略号组件的自定义省略符号功能。"
symbol="***"
expand-text="查看更多"
collapse-text="收起"
/>
</template>自定义样式
可以通过相关属性自定义文本颜色、字体大小、行高等样式。
<template>
<u-ellipsis
content="这是一段很长的文本内容,用来演示省略号组件的自定义样式功能。"
:rows="3"
color="#666666"
:font-size="16"
:line-height="24"
action-color="#ff6b6b"
expand-text="展开"
collapse-text="收起"
/>
</template>事件监听
组件支持展开/收起状态变化事件。
<template>
<u-ellipsis
content="这是一段支持点击事件的文本内容。"
expand-text="展开"
collapse-text="收起"
@change="onExpandChange"
/>
</template>
<script>
export default {
methods: {
onExpandChange(event) {
console.log('展开状态变化:', event.expanded)
console.log('当前显示内容:', event.content)
}
}
}
</script>API
Ellipsis Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| content | 文本内容 | String | - |
| position | 省略位置 | Enum | end |
| rows | 显示行数 | String | Number | 1 |
| expand-text | 展开文本 | String | - |
| collapse-text | 收起文本 | String | - |
| symbol | 省略符号 | String | ... |
| color | 文本颜色 | String | #303133 |
| font-size | 文本大小 | String | Number | 14 |
| line-height | 行高 | String | Number | 20 |
| action-color | 展开/收起按钮颜色 | String | #3c9cff |
| custom-style | 自定义样式 | Object | - |
Ellipsis Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 展开/收起状态改变时触发 | event = |
