更新记录

1.0.0（2026-07-03） 下载此版本

初始版本

平台兼容性

uni-app(4.0)

zv-text-preview

文本预览 / 展开折叠组件。超出指定行数后显示省略，支持展开与收起，并带有高度过渡动画。

基础用法

<zv-text-preview :content="text" :lines="2" />

参数说明

按钮位置 expandPosition / collapsePosition

事件

插槽

使用示例

纯文本

<zv-text-preview
    :content="longText"
    :lines="2"
/>

富文本

<zv-text-preview
    type="html"
    :content="htmlContent"
    :lines="2"
/>

自定义按钮样式与位置

<zv-text-preview
    :content="longText"
    :lines="2"
    expandPosition="inline"
    collapsePosition="bottom-right"
    expandText="展开"
    collapseText="收起"
    :expandStyle="expandStyle"
    :collapseStyle="collapseStyle"
    :textStyle="textStyle"
/>

<script>
export default {
    data() {
        return {
            longText: '文本超长展开折叠组件，超出指定的行数后，省略号...，显示文本...',
            textStyle: 'font-size: 28rpx; color: #333; line-height: 1.6;',
            expandStyle: 'color: #007aff; font-size: 28rpx;',
            collapseStyle: 'color: #007aff; font-size: 28rpx;'
        }
    }
}
</script>

受控展开状态

<zv-text-preview
    v-model:expanded="isExpanded"
    :content="longText"
    :lines="2"
    @expand="onExpand"
    @collapse="onCollapse"
/>

自定义按钮内容

<zv-text-preview :content="longText" :lines="2">
    <template #expand>
        <text style="color: #ff6600;">查看更多</text>
    </template>
    <template #collapse>
        <text style="color: #ff6600;">收起内容</text>
    </template>
</zv-text-preview>

说明

• 折叠态默认在最后一行末尾显示「展开」（expandPosition="inline"），展开后在下方右对齐显示「收起」。
• 展开 / 收起通过 max-height 过渡实现动画效果。
• 富文本模式下，超出判断基于剥离 HTML 标签后的文本高度估算，复杂排版场景建议配合 textStyle 微调。
• maskColor 需与页面背景色一致，行末「展开」按钮渐变遮罩才会自然。