1.0.2 • Published 2 months ago
@tanzhenxing/zx-read-more v1.0.2
zx-read-more 阅读更多组件
一个用于内容收起/展开的通用组件，支持 H5、小程序、APP，基于 Vue3 setup 语法，兼容多端。
基本用法
<zx-read-more :showHeight="80">
<text>很长的内容...</text>
</zx-read-more>属性说明
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| showHeight | 内容超出此高度才显示展开按钮 | String/Number | 400 |
| toggle | 展开后是否显示收起按钮 | Boolean | false |
| closeText | 关闭时的提示文字 | String | 展开阅读全文 |
| openText | 展开时的提示文字 | String | 收起 |
| color | 提示文字颜色 | String | #2979ff |
| fontSize | 提示文字大小(px) | String/Number | 14 |
| shadowStyle | 阴影样式对象 | Object | 见下方 |
| textIndent | 段落首行缩进 | String | 2em |
| name | 事件回调参数 | String/Number | '' |
shadowStyle 默认值
{
backgroundImage: 'linear-gradient(-180deg, rgba(255,255,255,0) 0%, #fff 80%)',
paddingTop: '100px',
marginTop: '-100px',
}事件说明
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| open | 内容被展开时触发 | name |
| close | 内容被收起时触发 | name |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 展示的内容 |
| toggle | 自定义展开/收起区域 |
进阶用法
自定义展开/收起文字
<zx-read-more closeText="查看更多" openText="收起内容">
<text>内容...</text>
</zx-read-more>自定义插槽
<zx-read-more>
<text>内容...</text>
<template #toggle>
<view style="color: #4caf50; font-weight: bold; text-align: center;">点我展开/收起</view>
</template>
</zx-read-more>事件监听
<zx-read-more @open="onOpen" @close="onClose">
<text>内容...</text>
</zx-read-more>注意事项
- 组件已兼容 H5、各类小程序、APP（nvue），无需关心平台差异。
- 内容高度计算基于 uniapp 官方 API，无浏览器特有 DOM。
- 如需自定义样式，可通过外部 class 或 style 覆盖。
完整示例
详见 src/pages/components/read-more/index.vue。