推荐一款基于Vue的前端IM聊天组件

奎奎网络
1,515 阅读3分钟

基于 VUE 2.0 的 IM 聊天组件

特性

  • 拥有丰富的自定义功能，任意搭配出不同风格的聊天界面
  • 可以单独使用内部组件，比如编辑框/按钮/popover 等
  • 不依赖任何第三方组件库
  • 可任意扩展的聊天消息类型

安装

  • npm install lemon-imui -S

源码：

gitee:gitee.com/june000/lem…

界面：

使用

import LemonIMUI from 'lemon-imui'

<lemon-imui ref="IMUI" />

示例

lemon-imui-examples.

教程

Contents

  • contact``` { //用户唯一ID id: "", //昵称 displayName: "工作协作群", //头像URL avatar: "upload.qqbodys.com/img/weixin/…", //会话类型 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: "upload.qqbodys.com/allimg/1710…" }; }
  • menu``` { //导航名称， 保留字段 lastMessages 和 contacts name: "custom1", //鼠标停留时显示文字 title: "自定义按钮1", //未读角标 unread: 0, //外观 render: menu => { return ; }, //打开内容 renderContainer: () => { return
    自定义
    ; }, //强制显示在底部 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 上传的文件
avatar
文章
阅读
粉丝