ReadMore 展开更多
"展开更多"组件允许用户通过点击来展开或收起文本内容,适用于需要控制文本显示长度的场景。
支持平台
安卓 | ios | web | 微信小程序 | 支付宝小程序 | QQ小程序 |
---|---|---|---|---|---|
√ | √ | √ | x | x | x |
示例
html
<template>
<t-page class="p.30" title="展开阅读更多">
<t-card title="ReadMore" class="mb.30"
sub-title="展开阅读更多组件用于在内容区域提供一种折叠和展开的功能,允许用户根据需要查看更多或更少的内容。它的功能亮点包括:可自定义展开和收起的提示文本,支持显示或隐藏展开/收起按钮,以及可选的阴影效果。使用场景包括:文章摘要、产品详情、用户评论等,需要在有限空间内展示可扩展内容的情况。"></t-card>
<t-section title="基础使用" type='p' class="tdb-tdr-mb.10"></t-section>
<t-col class="tdb-tdr-mb.30-p.20">
<t-read-more>
<rich-text :nodes="content"></rich-text>
</t-read-more>
</t-col>
<t-section title="锁定" type='p' class="tdb-tdr-mb.10"></t-section>
<t-col class="tdb-tdr-mb.30-p.30">
<t-read-more :disabled='true' closeText='开通会员解锁'>
<rich-text :nodes="content"></rich-text>
</t-read-more>
</t-col>
<t-section title="设置高度" type='p' class="tdb-tdr-mb.10"></t-section>
<t-col class="tdb-tdr-mb.30-p.30">
<t-read-more class="h.500">
<rich-text :nodes="content2"></rich-text>
</t-read-more>
</t-col>
</t-page>
</template>
<script>
export default {
data() {
return {
content: `<p style="line-height:40px;">在一个遥远的神秘国度,传说中有一把神奇的剑,能够赋予持有者无尽的力量。这把剑被藏在了一个隐秘的山洞中,只有最勇敢的冒险者才能找到它。</p>
<img style="width:100%;height:300px;" src="https://life.yundie.xyz/static/image/3.png" />
<p style="line-height:40px;">图1: 隐秘山洞的入口</p>
`,
content1: `
<p style="line-height:40px;">一位年轻的勇士,怀揣着对神秘剑的渴望,踏上了寻找的旅程。他穿过了茂密的森林,越过了险峻的山峰,最终来到了山洞的入口。</p>
<img style="width:100%;height:300px;" src="https://life.yundie.xyz/static/image/2.png" />
<p style="line-height:40px;">图2: 勇士穿越森林和山峰</p>
`,
content2: `<p style="line-height:40px;">在山洞的深处,勇士终于发现了那把传说中的神奇剑。他握住剑柄,感受到了一股强大的力量流入体内。从此以后,他成为了神秘国度的守护者,用这把剑保护着人民免受邪恶的侵害。</p>
<img style="width:100%;height:300px;" src="https://life.yundie.xyz/static/image/1.png" />
<p style="line-height:40px;">图3: 勇士找到神奇剑</p>
`
};
}
}
</script>
Props
名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
toggle | 是否显示"收起"按钮 | Boolean | true |
closeText | 关闭时的提示文字 | String | '展开阅读全文' |
openText | 展开时的提示文字 | String | '收起' |
shadow | 是否显示阴影 | Boolean | false |
shadowStyle | 阴影的样式 | String | 'linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.3))' |