该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
通过slot传入正文内容
<template> <u-read-more> <rich-text :nodes="content"></rich-text> </u-read-more> </template> <script> export default { data() { return { // 这是一段很长的文字，也可能包含有HTML标签等内容 content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`, } } } </script>
copy
#兼容性
由于一些微信小程序平台的渲染能力的问题，在解析u-parse组件内容时会比较耗时，导致read-more组件内部无法准确得知 内容的高度，而出现计算错误，这种情况下，我们需要借助u-parse组件的@load(内容多为文字时)或者@ready(内容多为图片时，可能会有较大延时)事件，通过ref 重新初始化read-more组件的高度，如下：
<template> <u-read-more ref="uReadMore"> <u-parse :content="content" @load="load"></u-parse> </u-read-more> </template> <script> export default { data() { return { // 这是一段很长的文字，也可能包含有HTML标签等内容 content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`, } }, methods: { load() { this.$refs.uReadMore.init(); } } } </script>
copy
#展开收起
配置toggle为true，展开后可以收起，否则展开后没有收起的按钮
<u-read-more :toggle="true"> <rich-text :nodes="content"></rich-text> </u-read-more>
copy
#配置展开高度
可以配置一个高度，单位rpx，只有slot传入的内容高度超出这个值，才会出现"展开阅读全文"字样的按钮
<u-read-more showHeight="600"> <rich-text :nodes="content"></rich-text> </u-read-more>
copy
#异步初始化
有时候需要展示的内容是从后端获取的，组件内部的mounted生命周期初始化时，请求尚未回来，会导致 内容的高度在初始化有误差。可以在请求完毕渲染后(指的是this.$nextTick)，通过ref调用组件的init方法，重新初始化
<template> <u-read-more ref="uReadMore"> <rich-text :nodes="content"></rich-text> </u-read-more> </template> <script> export default { data() { return { content: '', } }, onLoad() { // 模拟后端请求 setTimeout(() => { this.content = `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`, // 请注意上方已在组件中添加ref-uReadMore this.$nextTick(() => { this.$refs.uReadMore.init(); }) }, 2000); } } </script>
copy
#自定义样式
此组件上边部分有一个白色虚化的阴影，用以将点击区域与文字内容进行融合，如果您不想要这个阴影，可以调整shadowStyle对象，此对象内部如下：
{ // #ifndef APP-NVUE backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)", // #endif // #ifdef APP-NVUE // nvue上不支持设置复杂的backgroundImage属性 backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))", // #endif paddingTop: "100px", marginTop: "-100px", }
copy
如果您不想要阴影，将backgroundImage设置为none即可，关于paddingTop和marginTop自行调整至合适数值即可。
<template> <u-read-more ref="uReadMore" :shadowStyle="shadowStyle" :showHeight="200"> <rich-text :nodes="content"></rich-text> </u-read-more> </template> <script> export default { data() { return { content: '', shadowStyle: { backgroundImage: "none", paddingTop: "0", marginTop: "20rpx" } } } } </script>
