UPDATE

README.md

@@ -1,5 +1,6 @@
 # Lemon IMUI
 
+[中文文档](docs/APIs_zh.md).  
 基于 VUE 2.0 的 IM 聊天组件
 
 #### 特性
@@ -9,10 +10,21 @@
 - 不依赖任何第三方组件库
 - 可任意扩展的聊天消息类型
 
-#### 在线示例
+#### 安装
-
-[lemon-imui-examples](http://june000.gitee.io/lemon-im).
-
-#### 安装使用
 
 > npm install lemon-imui -S
+
+#### 使用
+
+```javascript
+import LemonIMUI from 'lemon-imui'
+Vue.use(LemonIMUI)
+```
+
+```html
+<lemon-imui ref="IMUI" />
+```
+
+#### 示例
+
+[lemon-imui-examples](http://june000.gitee.io/lemon-im).

docs/APIs_zh.md

@@ -0,0 +1,232 @@
+# API
+
+### 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 <i class="lemon-icon-attah" />;
+    },
+    //打开内容
+    renderContainer: () => {
+      return <div>自定义</div>;
+    },
+    //强制显示在底部
+    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 <span>[最新图片]</span>
+  })
+  ```
+
+- 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 上传的文件

examples/App.vue

@@ -22,12 +22,6 @@
         <!-- <template #contact-info="contact">
         <span style="color:blue">contact-info {{ contact }}</span>
       </template> -->
-        <!--
-      <template #drawer="contact">
-        <h1>自定义抽屉内容</h1>
-        <p>{{ contact }}</p>
-      </template>
-      -->
         <template #contact-title="contact">
           <span>{{ contact.displayName }}</span>
           <small class="more" @click="changeDrawer(contact)">&#8230;</small>
@@ -489,11 +483,17 @@ export default {
         ]
       },
       {
-        label: "武器",
+        label: "收藏",
         children: [
           {
-            name: "wx",
+            name: "1f62c",
-            src: "http://"
+            title: "微笑",
+            src: "https://twemoji.maxcdn.com/2/72x72/1f62c.png"
+          },
+          {
+            name: "1f621",
+            title: "微笑",
+            src: "https://twemoji.maxcdn.com/2/72x72/1f621.png"
           }
         ]
       }
@@ -569,7 +569,8 @@ export default {
       this.$refs.IMUI.closeDrawer();
     },
     handleSend(message, next, file) {
-      console.log("Event:send");
+      //console.log("Event:send");
+      console.log(message,next,file)
       setTimeout(() => {
         next();
       }, 1000);

examples/dist/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.e7f71477.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.3794e733.js rel=preload as=script><link href=css/index.e7f71477.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.3794e733.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.e7f71477.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.f8f6fe72.js rel=preload as=script><link href=css/index.e7f71477.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.f8f6fe72.js></script></body></html>

packages/components/editor.vue

@@ -116,7 +116,6 @@ export default {
           return (
             <div slot="tab-pane" index={index} tab={item.label}>
               {renderImageGrid(item.children)}
-              {renderImageGrid(item.children)}
             </div>
           );
         });
@@ -191,28 +190,6 @@ export default {
     initEmoji(data) {
       emojiData = data;
       this.$forceUpdate();
-      // this.emoji = [
-      //   {
-      //     label: "表情",
-      //     name: "face",
-      //     data: [
-      //       {
-      //         name: "wx",
-      //         src: "微笑"
-      //       }
-      //     ]
-      //   },
-      //   {
-      //     label: "武器",
-      //     name: "wa",
-      //     data: [
-      //       {
-      //         name: "wx",
-      //         src: "微笑"
-      //       }
-      //     ]
-      //   }
-      // ];
     }
   }
 };

packages/components/index.vue

@@ -123,22 +123,7 @@ export default {
         },
         ...message
       };
-      // const message = {
-      //   id: "123",
-      //   status: "succeed",
-      //   type: "image",
-      //   sendTime: 12312312312,
-      //   content: "asdas",
-      //   fromContactId: "123",
-      //   fromUser: { id: "123", displayName: "123", avatar: "123",}
-      // }
     },
-    // _setDefMessages(id) {
-    //   //this.messages[id] = this.messages[id] || [];
-    //   if (!messages[id]) {
-    //     this.$set(messages, id, []);
-    //   }
-    // },
     appendMessage(message, contactId = this.currentContactId) {
       this._addMessage(message, contactId, 1);
       this.messageViewToBottom();
@@ -584,8 +569,6 @@ export default {
     changeMenu(name) {
       this.$emit("change-menu", name);
       this.activeSidebar = name;
-      // const { renderContainer } = this.currentMenu;
-      // this._customContainerReady(renderContainer, CacheMenuContainer, name);
     },
     /**
      * 初始化编辑框的 Emoji 表情列表，是 Lemon-editor.initEmoji 的代理方法