共计 1805 个字符，预计需要花费 5 分钟才能阅读完成。
react-jwchat
介绍
react-jwchat 是一个简略的 web 聊天组件。
仓库地址：https://gitee.com/wx_504ae56474/react-jwchat～欢送各位大佬倡议斧正。
装置
npm install react-jwchat组件
Chat
应用：
<Chat
contact={contact}
me={my}
chatList={msgList}
onSend={(msg) => {}}
onEarlier={() => {}}
onImage={(files) => {}}
style={{
width: 600,
height: 500,
}}
/>属性：
| key | type | desc | required |
|---|---|---|---|
| contact | contact | 联系人信息 | true |
| me | contact | 自己信息 | true |
| onSend | func | 发送音讯时触发回调，回调参数为组装好的音讯对象 | true |
| onImage | func | 抉择图片后触发回调，回调参数为图片列表 | true |
| onEarlier | func | 点击加载更多回调 | false |
| style | style | 容器款式（应用组件时须要指定 width、height） | true |
ContactItem
应用：
<ContactItem contact={contact} onClick={(contact) => console.log(contact)} />属性：
| key | type | desc | required |
|---|---|---|---|
| contact | contact | 联系人信息 | true |
| onClick | func | 点击回调，回调参数蕴含以后联系人信息 | false |
| border | boolean | 时候显示列表项底部分隔线，在 ContactList 组件中默认为 true | false |
| style | style | 容器款式 | false |
ContactList
应用：
<ContactList
contactList={contactList}
onSelect={(contact) => console.log(contact)}
/>属性：
| key | type | desc | required |
|---|---|---|---|
| contactList | contact[] | 联系人列表，数组中的每个元素都为 contact 类型 | true |
| onSelect | func | 选中联系人触发回调，参数为以后选中联系人对象 | false |
| style | style | 容器款式 ( 应用时须要指定高度) | false |
API
contact
联系人信息对象
示例：
{
id: 16,
avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',
nickname: '金克丝',
message: '这是一条信息',
date: '02-11',
desc: '一行简短的简介',
}阐明：
| key | desc |
|---|---|
| id | 用户标示，须要惟一 |
| avatar | 用户头像 |
| nickname | 用户昵称 |
| message | 最近一条信息 |
| date | 信息更新工夫 |
| desc | 用户简介(用于在聊天框头部显示) |
message
音讯对象
示例：
以后信息为文字信息时，
message.type === 'text'
{
_id: '75b5bde8f3b9ef7aa9b704492cb28baf',
date: 1610016580,
user: {
id: 1234,
avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
nickname: 'sirosong',
desc: '这是我的第一条信息',
},
message: {type: 'text', content: '敌我打野差距👎'},
},以后信息为文字信息时，
message.type === 'image'
{
_id: '75b5bde8f3b9ef7aa904492cb28baf',
date: 1610016880,
user: {
id: 9527,
avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
nickname: '卡兹克',
desc: '这是我的第一条信息',
},
message: {
type: 'image',
content: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
},
},阐明：
| key | desc |
|---|---|
| _id | 每条信息的惟一标识，组件内主动生成 |
| date | 音讯产生工夫 |
| user | 以后音讯发起人的信息 |
| message | 音讯内容主体 |
正文完
