今天给大家分享一款超棒的Vue桌面端IM聊天组件LemonIMUI。

lemon-imui 基于 VUE2.x 的开源IM聊天室组件。支持自定义扩展功能，不依赖第三方组件库。

特性

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

安装

$ npm i lemon-imui -S

引入组件

可在main.js中全局引入，也可以单独在.vue页面引入使用。

import Vue from 'vue'
import LemonIMUI from 'lemon-imui'
Vue.use(LemonIMUI)
// 使用
<lemon-imui ref="IMUI" />

应用示例

<template>
  <div id="app">
    <div class="imui-center">
      <lemon-imui
        ref="IMUI"
        :user="user"
        :hide-menu="false"
        :hide-menu-avatar="false"
        @change-menu="handleChangeMenu"
        @change-contact="handleChangeContact"
        @pull-messages="handlePullMessages"
        @message-click="handleMessageClick"
        @menu-avatar-click="handleMenuAvatarClick"
        @send="handleSend"
      >
        <template #cover>
          <div class="cover">
            <i class="lemon-icon-message"></i><p><b>Lemon</b> IMUI</p>
          </div>
        </template>
        <template #contact-title="contact">
          <span>{{ contact.displayName }}</span>
          <small class="more" @click="changeDrawer(contact)">…</small>
        </template>
        <template #message-sidebar>
          <div class="bar">自定义消息顶部</div>
        </template>
        <template #contact-sidebar>
          <div class="bar">自定义联系人顶部</div>
        </template>
      </lemon-imui>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        id: "superadmin",
        displayName: "June",
        avatar: "http://upload.qqbodys.com/img/weixin/20170803/jiq4nzrkrnd0e.jpg"
      }
    };
  },
  mounted() {
    const { IMUI } = this.$refs;
    const contactData1 = {
      id: "contact-1",
      displayName: "工作协作群",
      avatar: "http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg",
      type: "single",
      index: "A",
      unread: 0,
      lastSendTime: 1566047865417,
      lastContent: "2"
    }
    const contactData2 = {...}
    const contactData3 = {...}
    // 初始化聊天信息
    IMUI.initContacts([
      {...contactData1},
      {...contactData2},
      {...contactData3},
    ])
    
    // 初始化侧边导航
    IMUI.initMenus([...])
    
    // 初始化表情
    IMUI.initEmoji([...])
  },
  methods: {
    // 侧边栏导航切换
    handleChangeMenu() {
      console.log("Event:change-menu");
    },
    handleMessageClick(e, key, message) {
      if (key == "status") {
        console.log('正在重新发送消息...')
      }
    },
    // 点击用户头像
    handleMenuAvatarClick() {
      console.log("Event:menu-avatar-click");
    },
    handleSend(message, next, file) {
      console.log("Event:send消息");
    },
  }
}
</script>

• 右侧区域模板信息自定义

<template #cover>
  <div class="cover">
    <i class="lemon-icon-message"></i><p><b>Lemon</b> IMUI</p>
  </div>
</template>

• 自定义消息、联系人顶部模板

<template #message-sidebar>
  <div class="bar">自定义消息顶部</div>
</template>

<template #contact-sidebar>
  <div class="bar">自定义联系人顶部</div>
</template>

• initEmoji初始化表情、收藏表情

let { IMUI } = this.$refs

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'
      }
    ]
  }
])

# 示例地址
http://june000.gitee.io/lemon-im/

# 中文文档
https://gitee.com/june000/lemon-im/blob/master/docs/APIs_zh.md

# 仓库地址
https://gitee.com/june000/lemon-im

好了，就介绍到这里。如果大家觉得不错的话，可以去看下哈！