聊天组件(Chat)

Quasar提供了一个称为QChatMessage的聊天组件，它实际上是一个聊天条目，用于呈现属性提供的数据。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QChatMessage']
}

基本用法

这显示了双方之间的简单聊天。

<q-chat-message
  label='Sunday, 19th'
/>

<q-chat-message
  name="me"
  avatar="statics/boy-avatar.png"
  :text="['hunter2']"
  stamp="4 minutes ago"
  sent
/>

<q-chat-message
  name="Jane"
  avatar="statics/linux-avatar.png"
  :text="['hey, if you type in your pw', 'it will show as stars']"
  stamp="7 minutes ago"
/>

Vue属性

Vue属性 类型 说明
sent 布尔 呈现为已发送消息（因此来自当前用户）
label 字符串 消息标签
name 字符串 消息创建者的名称
avatar 字符串 创建者的头像图片的URL（使用静态资源）
text 数组 作为消息正文的字符串数组
stamp 字符串 创建时间戳字符串
text-color 字符串 文本的颜色
bg-color 字符串 聊天消息泡泡的颜色
size 数字 1-12个（与col-*相同）。

注意text属性是一个字符串数组。当两个或更多消息共享相同（或非常接近）的时间戳时，这很有用。它们将显示在单独的气泡上，但会更紧密地分组在一起，以便为此类分组显示创建者的名称和时间戳。

请参阅demo源代码以获取更完整的示例。

碎片 时间轴