Lemon-IMUI

contact

{
  //用户唯一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

{
  //消息唯一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"
  };
}

{
  //导航名称， 保留字段 lastMessages 和 contacts
  name: "custom1",
  //鼠标停留时显示文字
  title: "自定义按钮1",
  //未读角标
  unread: 0,
  //外观
  render: menu => {
    return <i class="lemon-icon-attah" />;
  },
  //打开内容
  renderContainer: () => {
    return <div>自定义</div>;
  },
  //强制显示在底部
  isBottom: true
}

Props

user

{
  id:'',
  avatar:'',
  displayName:'',
}

个人信息

currentContactId 当前会话联系人 ID
currentContact 当前会话联系人信息
messageTimeFormat 消息列表时间格式化函数
contactTimeFormat 联系人时间格式化规则
hideDrawer 是否隐藏抽屉
hideMenuAvatar 是否隐藏导航头像
hideMenuAvatar 是否隐藏导航

Methods

initMenus([menu]);
初始化导航
initContacts([contact]);
初始化联系人

initEmoji() 初始化表情

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)
配置联系人列表最新消息的渲染函数

IMUI.setLastContentRender('image', message => {
  return <span>[最新图片]</span>
})

lastContentRender(message) 根据 message 渲染联系人列表最新消息 DOM

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 上传的文件

4.7 KiB Raw Blame History

Lemon-IMUI

Contents

Props

Methods

Scoped Slot

Events

4.7 KiB

Raw Blame History