read-more
一个兼容 app,小程序的展开阅读更多组件
属性
| 属性名称 |
类型 |
默认值 |
是否必填 |
说明 |
| nodes |
String |
|
是 |
HTML String(avm 的rich-text 咋用这个就咋用) |
| defaultHeight |
String |
100 |
否 |
默认展示高度,超出该高度的内容将被隐藏 |
| openText |
String |
|
否 |
在全部展示内容下的按钮文字 |
| hiddenText |
String |
|
否 |
在仅展示部分内容下的按钮文字 |
| buttonColor |
String |
#fff |
否 |
按钮背景颜色 |
| buttonTextColor |
String |
#000 |
否 |
按钮文字颜色 |
| buttonTextSize |
Number |
10 |
否 |
按钮文字大小 |
| buttonWidth |
Number |
50 |
否 |
按钮宽度(百分比) |
事件
| 事件名 |
是否必填 |
说明 |
| open |
是 |
在隐藏部分内容的情况下点击按钮 |
| hidden |
是 |
在展示全部内容的情况下点击按钮 |
方法
| 方法名 |
是否必填 |
说明 |
| readMoreTypeChange |
是 |
用于切换隐藏部分内容及展示全部内容 |
食用方法
<read-more
:nodes="content"
defaultHeight="200"
openText="点击隐藏"
hiddenText="点击展开"
buttonColor="#ff1281"
buttonTextColor="#fff"
buttonTextSize="16"
buttonWidth="30"
@open="open"
@hidden="hidden"
ref={this.bindRef}
/>
备注
一定要在组件标签内,一定要加入 ref={this.****} 才能操作组件内的方法,具体操作,请查看demo