<q-chat-list>
<q-chat-item></q-chat-item>
<q-chat-item></q-chat-item>
</q-chat-list>
无
无
<q-chat-item
id="001"
display-name="张三"
avatar="/res/avatar.jpg"
red-dot-style="reddot"
notice-count="2"
notice-msg="Hello"
is-muted
></q-chat-item>
string
string
: chat 名
string
, 头像图片 url
number
| string
, 未读消息数,数字(N)或字符串("99+")
string
, 未读消息内容
bool
, 是否静音
bool
, 是否被选中
const chatItem = document.createElement('q-chat-item')
chatItem.addEventListener('click', () => {
chatItem.active = true
console.log(chatItem.id)
})
<q-friend-list>
<q-friend-item></q-friend-item>
<q-friend-item></q-friend-item>
</q-friend-list>
无
无
<q-friend-item
id="001"
display-name="张三"
avatar="/res/avatar.jpg"
></q-friend-item>
string
string
, avatar url
bool
, is active
const friendItem = document.createElement('q-friend-item')
friendItem.addEventListener('click', () => {
friendItem.active = true
console.log(friendItem.id)
})
<q-chat-view>
<q-message-item from="张三" content="你好!"></q-message-item>
<q-message-item from="李四" content="你好!"></q-message-item>
</q-chat-view>
无
无
<message-item
content="Hello!"
from="张三"
from-avatar="/res/avatar.jpg"
from-self
></message-item>
string
, 信息内容
string
, 发送者名
string
, 发送者头像
bool
, 是否本人发送
无
<q-send-box value="Hello!"></q-send-box>
string
输入
const sendBox = document.createElement('q-send-box')
sendBox.addEventListener('input', () => {
console.log(sendBox.value)
})
提交
const sendBox = document.createElement('q-send-box')
sendBox.addEventListener('submit', () => {
console.log(sendBox.value)
})
提交文件
const sendBox = document.createElement('q-send-box')
sendBox.addEventListener('file', () => {
console.log(sendBox.value)
})
(本次应该没有“阅读”模块,只有“好友” & “聊天”两个模块)
<q-main-tab selected="chat"></q-main-tab>
string
: 可选值包括 chat
/ friend
选中行为
const mainTab = document.createElement('q-main-tab')
mainTab.addEventListener('select', () => {
console.log(mainTab.selected)
})
(原来的 ChatGroup
,我理解其实是聊天界面的顶栏组件?另,下拉查看群成员列表的功能先不实现?)
<q-chat-header
title="七牛工作群"
group-num="6"
></q-chat-header>
string
: 聊天标题
number
: 聊天人数
无