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