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