Vue-znl-chat NPM

vue-znl-chat

chat component for vue
聊天会话通用组件

Use

// 组件安装
npm i vue-znl-chat --save

// 组件引入
import Vue from 'vue'
import ZnlChat from 'vue-znl-chat'
Vue.use(ZnlChat)

// 样式引入
import 'vue-znl-chat/dist/themem-default/index.css'

// template
// 会话
<znl-chat>
</znl-chat>
// 询价
<znl-inquiry>
</znl-inquiry>

znl-chat

属性

name	Description	default	type
visible.sync	是否显示会话组件	false	Boolean
close-on-click-modal	是否可以通过点击modal层关闭聊天框	false	Boolean
contacts	联系人	{}	Object
user-info	好友详情	{}	Object
address-lists	会话消息列表	[]	Array
chat-info	聊天详情	{}	Object
self-info	登陆用户信息	{}	Object
is-scroll	是否自动滚动到最底层（单次设置）	true	Boolean
search-paltes	搜索好友结果	[]	Array
system-messages	系统消息	{}	Object
send-success-msg	发送成功后的消息实体	{}	Object

userInfo 好友详情

{
  AllTags: [],
  AvatarUrl: '',
  CompanyName: '',
  FriendId: '',
  IsMyWork: true,
  Mobile: '',
  Name: '',
  Tags: [],
  Telephone: []
}

addressLists 会话消息列表

[
  {
    ConversationID: 10,
    FromUserAvartarUrl: '',
    FromUserId: '',
    FromUserName: '',
    IsOnline: true,
    MsgContent: '合作愉快',
    MsgTime: '2018-01-17T18:30:38.463',
    MsgType: 0, // 0文本 1询价 2报价
    UnreadMsgCount: 0
  }
]

chatInfo 聊天详情

{
  IsFriend: true,
  IsOnline: true,
  NewestMsgList: [
    {
      FromAvatarUrl: '',
      FromCompanyName: '',
      FromMobile: '',
      FromNickName: '',
      FromTelephone: '',
      FromUserId: '',
      ID: 2396,
      IsMymessage: true,
      MsgContent: '12',
      MsgTimePhrase: '一天前',
      MsgType: 0,
      ReplyStatus: 0,
      ToUserId: ''
    }
  ]
}

selfInfo 登陆用户信息
```
{
  AvartarUrl: '',
  Name: ''
}
```

systemMessages系统消息

{
  FromUserAvartarUrl: '',
  FromUserCompanyName: '',
  FromUserId: '',
  FromUserName: '',
  RequestId: 0,
  RequestStatus: 0,
  RequestTimePhrase: ''
}

sendSuccessMsg

{
  FromAvatarUrl:null,
  FromCompanyName:null,
  FromMobile:null,
  FromNickName:null,
  FromTelephone:null,
  FromUserId:null,
  ID: 0,
  IsMymessage: true,
  MsgContent:"1↵",
  MsgTime:"2018-01-26T14:24:32.315777+08:00",
  MsgTimePhrase:null,
  MsgTimestamp:1516947872.3157768,
  MsgType:0,
  ReplyStatus:0,
  ToUserId:null
}

contacts 联系人

{
  FriendCount: 10,
  Tags: [
    {
      FriendCount: 2,
      TagName： '我的同事',
      Friends: [
        {
          AvartarUrl: '123456',
          FriendID: '123456',
          Name: '弦动我心'
        }
      ]
    }
  ]
}

Events

znl-inquiry

属性

name	Description
saveUserName(val, id)	保存备注
delete-user(id)	删除好友
search-palte(paltes, e)	前端搜索方法
labls-change (type, label, info)	标签增加add/删除 delete
add-blacklist(info)	加入黑名单
cancel-blacklist(info)	取消黑名单
add-new-plate（id）	加好友
check-userinfo（id）	获取好友详情
send-message（msg, id）	发送消息
load-more（ userInfo, msgs）	加载更多
send-message-toggle（info）	好友详情切换到聊天框
chat-address-toggle（chatinfo）	聊天列表切换
repulse-request(info)	拒绝好友申请
confirm-request(info)	同意好友申请
delete-conversation（info）	删除会话