手册版本 V6.0
此组件已废弃，仅为老用户保留，新版本组件请移步手册左侧 内容渲染 组件。
组件介绍
gui-article-info [ 文章内容解析组件 ] 功能包括 :
1、解析 GraceUI 编辑器产生的内容;
2、经过转换( 我们提供 php 版本的转换代码 ) 可以适配 百度 UEditor 生成的 html 内容;
3、提供图片预览功能、样式更好看;
组件名称
gui-article-info : GraceUI 组件目录/gui-article-info.vue
兼容平台
| H5 | APP | 小程序 | NVUE |
| ✔ | ✔ | ✔ | ✔ |
组件属性
| 属性名称 | 类型 | 默认值 | 作用 |
| article | Array | [] | 文章详情数据，数组格式 |
| itemMargin | String | 20rpx | 项目直接的间距 |
| padding | Number | 30 | 文章详情整体左右间距 |
| textClass | Array | ['gui-article-text', 'gui-primary-text'] | 文本样式 |
| centerClass | Array | ['gui-article-center', 'gui-primary-text'] | 居中样式 |
| imgRadius | String | 6rpx | 图片圆角 |
| quoteClass | Array | ['gui-article-quote', 'gui-primary-text', 'gui-bg-gray', 'gui-dark-bg-level-2'] | 引用样式 |
| strongClass | Array | ['gui-article-strong', 'gui-primary-text'] | 加粗样式 |
| splineClass | Array | ['gui-article-spline', 'gui-color-gray'] | 分割线样式 |
为什么使用此组件
1、富文本 : 不支持格式较多、不够稳定、不支持图片点击事件;
2、webview : 交互困难，页面无法使用其他组件;
3、效率较低、效果不好!
项目数据结构
[{"type":"txt","content":""},......]
支持的类型
txt - 普通文本
center - 居中
img - 图片
quote - 引用
pre - 代码块
strong - 加粗
link - 链接
spline - 分隔线 [ 编辑器对应 hr 标签 ]
h1 ~ h6
video
转换思路
我们提供了 php 版本的 基于“百度 UEditor“ 生成内容的转换代码，请在GraceUI 付费用户群内下载 ~
演示代码
UNI 普通版本
NVUE 版本
登录并购买 GraceUI 后可以查阅完整手册内容 。
