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