手册版本 V5.0
组件介绍
gui-im-message 消息展示组件用于展示及时通讯消息，支持文本、图片、语音三种格式，带有图片预览，语音播放等功能；
组件名称
gui-im-message : /graceUI/组件目录/gui-im-message
兼容平台
| H5 | APP | 小程序 | NVUE |
| ✔ | ✔ | ✔ | 不支持，请使用vue实现 |
组件属性
| 属性名称 | 类型 | 默认值 | 作用 |
| msgs | Array | [] | 消息数据，格式见下面的说明 |
| userid | String | 用户唯一性识别id， 当用户id与消息数据中的uindex相等时 消息右侧展示 | |
| group | String | 消息分组，过滤本组消息 | |
| background | String | #F7FBFE | 组件背景颜色 |
| unameStyle | String | line-height:28rpx; height:28rpx; font-size:26rpx; color:#666666; | 用户昵称样式 |
| txtContentStyle | String | line-height:38rpx; font-size:30rpx; color:#2B2E3D; | 文本消息样式 |
消息格式
var msgs = [
{
group : '分组id',
uindex : '用户id',
uname : '昵称',
contentType : '消息类型', // txt -文本， img - 图片， voice - 语音
uface : '用户头像图片地址',
content : '消息数据',
date : '消息发送时间'
},
// 如
{
group : 'group1',
uindex : '10000',
uname : '老兵张嘎',
contentType : 'txt',
uface : 'https://img-cdn-tc.dcloud.net.cn/uploads/article/20201111/21cbed4d79a442b841513c99f8a53e85.png',
content : '鼓掌 ...',
date : '2021.01.11 19:20'
},
......
}
// 更多数据格式请参考 /GraceUI5/demoData/immessages.js演示代码
UNI 普通版本
NVUE 版本
登录并购买 GraceUI 后可以查阅完整手册内容 。