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）	删除会话