RichText 富文本
基于原生rich-text
进行扩展,更加方便使用,区别与c-html组件,此组件用于显示轻量、简单的字符串。
平台
App | 小程序 | H5 |
---|---|---|
√ | √ | √ |
属性
属性名 | 类型 | 默认值 | 说明 | 平台 |
---|---|---|---|---|
content | String | null | 富文本内容 | All |
fontSize | String,Number | 28rpx | 大小 | All |
lineHeight | Number, String | null | 行高 | All |
color | String | c-t-main | 颜色,支持c-t- 开头的颜色类 | All |
align | String | left | 对齐 | All |
space | String | 显示连续空格 | App、H5、微信基础库2.4.1+、QQ小程序、抖音小程序、快手小程序 | |
selectable | Boolean | true | 富文本是否可以长按选中,可用于复制,粘贴等场景 | 百度小程序支持 |
imageMenuPrevent | Boolean | false | 阻止长按图片时弹起默认菜单(将该属性设置为image-menu-prevent或image-menu-prevent="true") 只在初始化时有效,不能动态变更;若不想阻止弹起默认菜单,则不需要设置此属性 | 百度小程序支持 |
preview | Boolean | true | 富文本中的图片是否可点击预览。在不设置的情况下,若 rich-text 未监听点击事件,则默认开启。未显示设置 preview 时会进行点击默认预览判断,建议显示设置 preview | 百度小程序支持 |
cClass | String,Array,Object | null | 组件类 | All |
cStyle | String,Array,Object | null | 组件样式 | All |
margin | String,Number,Array | null | 外边距 | All |
padding | String,Number,Array | null | 内边距 | All |
bgColor | String | null | 背景色,支持c-bg- 开头的背景色类 | All |
事件
事件名 | 说明 | 平台 |
---|---|---|
click | 点击时 | All |
itemclick | 拦截点击事件(只支持 a、img标签),返回当前node信息 event.detail= | H5 (3.2.13+)、App-Vue (3.2.13+) |
longpress | 长按 | All |
示例
vue
<template>
<c-rich-text :content="'<p>测试<span>富文本</span></p>'" fontSize="28rpx" />
</template>
1
2
3
2
3