vue-chat-im

vue-chat-im

1.安装

npm install vue-chat-im@latest -S

* 提示：装完插件后，需要在 package.json 中手动修改插件版本为 latest

eg： "vue-chat-im": "latest"

2.引入

import store from './store'
import ZjkjIm from "vue-chat-im"

Vue.use(ZjkjIm);
ZjkjIm.mergeStore(store); // vuex 注册im模块

3.使用

注意：确保imAccount和imToken都有值

 <zjkj-im
    :imAccount="imAccount"
    :imToken="imToken"
    :isShow="isShow"
    @close="closeIm"
 ></zjkj-im>

Props

params	Description	type	default
imAccount	用户imAccount	Stirng	无
imToken	用户imToken	String	无
isShow	显示隐藏窗口	Boolean	一定用局部变量控制显示隐藏
close	关闭窗口回调	Function	无

Event

im注册了全局变量，可直接使用全局变量打开会话

1.交流：$imToChat(imAccount)

 this.$imToChat(imAccount) // 打开会话
 imAccount：为交流对象的imAccount
 
 兼容旧方法，通过zjkj-im组件的引用对象调用
 this.$store.commit("SEND_MESSAGE");    // 需先打开会话
 this.$nextTick(() => {
   this.$refs.zjkjImRef.findFriend(imAccount);
 });

2.分享：$imShareMsg(url)

this.$imShareMsg('https://www.xxx.com') // 打开选择用户，分享

3.使用initiateGroup

注意：该选择器仅处理选择人员、业务不处理 以下示例：分享调用选择器

 <initiateGroup
    title="立即分享"
    :orgstructure="['friend', 'group', 'recent', 'getAllOrg']"
    :isyourSelf="false"
    :forward="true"
    @determine="determine"
    @closeCreateChatComponent=“closeCreateChatComponent”
 ></initiateGroup>

Props

params	Description	type	default
title	选择器title	Stirng	无
orgstructure	选择器列表展示顺序	Array	["friend", "getAllOrg"]
isyourSelf	是否包含自己	Boolean	true
forward	是否为转发	Boolean	false
determine	确认回调	Function	无
closeCreateChatComponent	取消回调	Function	无

Props