Chat 聊天对话

INFO

用于展示对话形式的内容，如聊天记录、FAQ 等。

基本语法

<c-chat>
  <c-chat-item name="发言人1">消息内容1</c-chat-item>
  <c-chat-item name="发言人2" self>消息内容2</c-chat-item>
</c-chat>

参数说明

参数

类型

默认值

说明

name

string

无

发言人名称

self

boolean

false

添加此属性表示自己发送的消息（右对齐）

使用示例

示例 1：简单对话

<c-chat>
  <c-chat-item name="用户">请问如何安装这个主题？</c-chat-item>
  <c-chat-item name="客服" self>您好！您可以在 Halo 后台的主题管理中上传安装。</c-chat-item>
  <c-chat-item name="用户">好的，谢谢！</c-chat-item>
  <c-chat-item name="客服" self>不客气，有问题随时联系我们~</c-chat-item>
</c-chat>

示例 2：技术讨论

<c-chat>
  <c-chat-item name="小明">这个 Bug 怎么解决啊？</c-chat-item>
  <c-chat-item name="我" self>你试试清除缓存？</c-chat-item>
  <c-chat-item name="小明">试过了，不行...</c-chat-item>
  <c-chat-item name="我" self>那看看控制台有没有报错信息</c-chat-item>
  <c-chat-item name="小明">找到了！是跨域问题！</c-chat-item>
</c-chat>

示例 3：FAQ 形式

<c-chat>
  <c-chat-item name="Q">主题支持哪些浏览器？</c-chat-item>
  <c-chat-item name="A" self>支持所有现代浏览器：Chrome、Firefox、Safari、Edge。</c-chat-item>
  <c-chat-item name="Q">如何开启深色模式？</c-chat-item>
  <c-chat-item name="A" self>点击侧边栏底部的主题切换按钮即可。</c-chat-item>
</c-chat>

使用效果