1.0.2 • Published 3 years ago
@mas.io/adc-rich-pro v1.0.2
安装
tnpm install --save @alipay/adc-rich-pro组件介绍
富文本组件，支持Html实体，全面的标签支持，支持图片点击和链接呗被点击事件，基于mp-html扩展。
参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| containerStyle | 否 | String | 容器style样式 | '' | 'padding:10rpx' |
| content | 是 | String | 需要被渲染的Html内容 | '' | 'aaaa' |
| loadingImg | 否 | String | 图片加载过程中的占位图链接 | '' | 'https://xxx.com/loadig.gif' |
| errorImg | 否 | String | 图片出错时的占位图链接 | '' | 'https://xxx.com/err.gif' |
| lazyLoad | 否 | Boolean | 是否开启图片懒加载 | false | true |
| pauseVideo | 否 | Boolean | 是否在播放一个视频时自动暂停其他视频 | true | true |
| previewImg | 否 | Boolean | 是否允许图片被点击时自动预览(若使用onImgTap自定义事件，需将此属性置为false) | true | false |
| selectable | 否 | Boolean | 是否开启文本长按复制 | false | true |
| showImgMenu | 否 | Boolean | 是否允许图片被长按时显示菜单 | true | false |
| copyLink | 否 | Boolean | 是否允许外部链接被点击时自动复制 | false | false |
| scrollTable | 否 | Boolean | 是否给每个表格添加一个滚动层使其能单独横向滚动 | false | false |
| tagStyle | 否 | Object | 设置标签的默认样式 | false | {a: 'color:red'} |
| useAnchor | 否 | Boolean | 是否使用锚点链接 | false | false |
| markdown | 否 | Boolean | 是否支持markdown渲染 | false | false |
| onLoad | 否 | Function | dom树加载完毕时 | null | (e)=>{} |
| onReady | 否 | Function | 图片加载完毕时（不包含懒加载的图片） | null | (e)=>{} |
| onError | 否 | Function | 发生渲染错误时 | null | (e)=>{} |
| onImgTap | 否 | Function | 图片被点击时 | null | (e)=>{} |
| onLinkTap | 否 | Function | 链接被点击时 | null | (e)=>{} |
| onPlay | 否 | Function | 音视频播放时 | null | (e)=>{} |
| onDidMount | 否 | Function | 获取富文本实例 | null | (e)=>{} |
在小程序中使用
{
"usingComponents": {
"mas-adc-rich-pro": "@alipay/adc-rich-pro/es/index"
}
}在 page.axml 中引用组件
<!-- 页面使用方式 -->
<mas-adc-rich-pro content="{{content}}" onLinkTap="onLinkTap" onImgTap="onImgTap"/>Badges
