diff --git a/README.md b/README.md index 87b7f77..a40811f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,5 @@ # Lemon IMUI -[中文文档](docs/APIs_zh.md). 基于 VUE 2.0 的 IM 聊天组件 #### 特性 @@ -17,15 +16,15 @@ #### 使用 ```javascript -import LemonIMUI from 'lemon-imui' -import "lemon-imui/dist/index.css"; -Vue.use(LemonIMUI) +import LemonIMUI from 'lemon-imui'; +import 'lemon-imui/dist/index.css'; +Vue.use(LemonIMUI); ``` ```html ``` -#### 示例 +#### 示例 · 文档 -[lemon-imui-examples](http://june000.gitee.io/lemon-im). +[lemon-imui](http://june000.gitee.io/lemon-im). diff --git a/docs/APIs_zh.md b/docs/APIs_zh.md deleted file mode 100644 index 478cca7..0000000 --- a/docs/APIs_zh.md +++ /dev/null @@ -1,232 +0,0 @@ -# Lemon-IMUI - -### Contents - -- contact - ```javascript - { - //用户唯一ID - id: "", - //昵称 - displayName: "工作协作群", - //头像URL - avatar: "http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg", - //会话类型 single | many - type: "single", - //通讯录索引，默认根据字母排序，也可以手动排序“[1]最近联系人” - index: "A", - //未读消息 - unread: 0, - //最近消息时间 - lastSendTime: 1566047865417, - //最近消息内容 - lastContent: "2" - } - ``` -- message - ```javascript - { - //消息唯一ID - id: "", - status: "succeed", - //消息类型 voice | file | video | image | text - type: "text", - //消息发送时间 - sendTime: 1572415923000, - //消息内容 | URL - content: generateRandWord(), - //文件大小 - fileSize: 1231, - //文件名称 - fileName: "asdasd.doc", - //当前会话ID - toContactId:"", - //发送消息的用户 - fromUser:{ - id: "system", - displayName: "系统测试", - avatar: "http://upload.qqbodys.com/allimg/1710/1035512943-0.jpg" - }; - } - ``` -- menu - ```javascript - { - //导航名称， 保留字段 lastMessages 和 contacts - name: "custom1", - //鼠标停留时显示文字 - title: "自定义按钮1", - //未读角标 - unread: 0, - //外观 - render: menu => { - return ; - }, - //打开内容 - renderContainer: () => { - return
自定义
; - }, - //强制显示在底部 - isBottom: true - } - ``` - -### Props - -- user - ```javascript - { - id:'', - avatar:'', - displayName:'', - } - ``` - 个人信息 -- currentContactId - 当前会话联系人 ID -- currentContact - 当前会话联系人信息 -- messageTimeFormat - 消息列表时间格式化函数 -- contactTimeFormat - 联系人时间格式化规则 -- hideDrawer - 是否隐藏抽屉 -- hideMenuAvatar - 是否隐藏导航头像 -- hideMenuAvatar - 是否隐藏导航 - -### Methods - -- initMenus([menu]); - 初始化导航 -- initContacts([contact]); - 初始化联系人 -- initEmoji() - 初始化表情 - ```javascript - IMUI.initEmoji([ - { - label: '表情', - children: [ - { - name: '1f600', - title: '微笑', - src: 'https://twemoji.maxcdn.com/2/72x72/1f600.png' - }, - { - name: '1f62c', - title: '微笑', - src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png' - } - ] - }, - { - label: '收藏', - children: [ - { - name: '1f62c', - title: '微笑', - src: 'https://twemoji.maxcdn.com/2/72x72/1f62c.png' - } - ] - } - ]) - ``` -- appendMessage(message) - 在当前聊天窗口插入新消息 - -- removeMessage(messageId, contactId) - 删除聊天消息 - -- updateMessage(messageId, contactId, message) - 修改聊天聊天消息 - -- updateContact(contactId,contact) - 修改联系人 - -- getMessages(contactId) - 返回所有本地消息，传入 contactId 只返回与该联系人的消息 - -- getContacts() - 获取所有联系人 - -- openDrawer(vnode) - 打开抽屉 - -- closeDrawer() - 关闭抽屉 - -- changeDrawer(vnode) - 切换抽屉显示 - -- changeMenu(menuName) - 切换导航 - -- changeContact(contactId) - 切换聊天对象 - -- messageViewToBottom() - 将当前聊天窗口滚动到底部 - -- setLastContentRender(messageType, render) - 配置联系人列表最新消息的渲染函数 - - ```javascript - IMUI.setLastContentRender('image', message => { - return [最新图片] - }) - ``` - -- lastContentRender(message) - 根据 message 渲染联系人列表最新消息 DOM - ```javascript - IMUI.updateContact(contact.id, { - lastContent: IMUI.lastContentRender(message) - }) - ``` - -### Scoped Slot - -- cover - 自定义聊天封面 - -- contact-title 参数{ contact } - 自定义联系人标题 - -- message-sidebar - 插入到最新消息列顶部 - -- contact-sidebar - 插入到联系人列顶部 - -- contact-info 参数{ contact } - 自定义联系人信息 - -### Events - -- change-menu(menuName) - 切换导航 - -- change-contact(contact) - 切换导航会话 - -- pull-messages(contact,next) - 拉取新消息 - - - next([message],isEnd) [isEnd 是否无更多数据] - -- message-click(event, key, message) - - - event 事件 - - key 触发目标 - - message 消息内容 - -- menu-avatar-click() - 点击导航头像 - -- send(message, next, file) - - message 当前消息体 - - next(message) 调用该函数完成消息发送 - - file 上传的文件 diff --git a/examples/App.vue b/examples/App.vue index fcf413c..0c3183d 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -1,5 +1,12 @@