Chat 客服聊天

avue-chat 提供消息列表、输入框、快捷回复和媒体预览。组件只处理界面与消息展示；消息发送、服务端保存和接收消息由业务代码接入。

本地消息与快捷回复

效果预览可直接操作下方示例

输入消息后点击发送，或选择快捷回复。示例通过组件实例追加消息并模拟本地回复；关闭了系统通知，不连接外部聊天服务。

正在加载示例…

<template>
  <avue-chat ref="chat" v-model="draft" :list="messages" :keylist="quickReplies"
             :config="config" width="100%" :height="520" :notice="false"
             :tools="{ img: true, video: false, file: false }"
             @submit="sendMessage" @keysend="sendMessage" @keyadd="addQuickReply">
    <template #menu>
      <el-tag size="small" type="info">本地演示 · {{ messages.length }} 条消息</el-tag>
    </template>
  </avue-chat>
</template>

<script setup>
import { ref } from 'vue'

const chat = ref(null)
const draft = ref('如何使用')
const config = { name: 'Avue 助手', dept: '本地交互示例', myName: '我' }
const quickReplies = ref(['如何使用', '查看图片示例'])
const messages = ref([{
  id: 'welcome',
  mine: false,
  name: 'Avue 助手',
  text: { text: '你好，发送一条消息或选择下方的建议。', list: [
    { id: 'usage', text: '如何使用', ask: '如何使用' },
    { id: 'image', text: '查看图片示例', ask: '查看图片示例' }
  ] }
}])

function addQuickReply(text) {
  if (!quickReplies.value.includes(text)) quickReplies.value.push(text)
}

function sendMessage(text) {
  const content = String(text || '').trim()
  if (!content || !chat.value) return
  // submit 只提供待发送内容，业务决定何时追加消息。
  chat.value.pushMsg({ mine: true, text: content })
  draft.value = ''
  if (content === '查看图片示例') {
    const detail = chat.value.getDetail({ type: 'img', src: '/images/logo.png' })
    chat.value.rootSendMsg({ text: `点击图片可预览：<br>${detail}` })
  } else {
    chat.value.rootSendMsg('消息已在本地展示。实际项目可在 submit 中调用自己的消息接口，并在收到回复后调用 rootSendMsg。')
  }
}
</script>

Props

参数	说明	类型	默认值
modelValue / v-model	输入框草稿，不是消息列表	string	''
list	消息数组；pushMsg 会直接向该数组追加	array	[]
config	标题及双方身份，见下表	object	{}
keylist	快捷回复文本数组；新增由 keyadd 回调保存	string[]	[]
width / height	聊天区域宽高，推荐传数字或百分比	number / string	320 / 520
size	输入框、按钮等控件尺寸	string	—
placeholder	输入提示，空值使用当前语言包文案	string	''
tools	工具开关；传入对象会替换整个默认对象	object	{ img: true, video: true, file: true }
disabled / loading	禁用输入和发送 / 发送加载态	boolean	false
autoScroll	消息列表变化后自动滚动到底部	boolean	true
clearOnSend	文本发送后自动清空草稿	boolean	false
notice	调用 rootSendMsg 后尝试发送系统通知	boolean	true
audio	通知声音的候选音频地址	string[]	内置提示音地址数组
beforeOpen	媒体打开前回调，调用 open() 后继续	function	—
sanitize	自定义内容处理函数 (html) => html；结果仍经过组件内置过滤	function	—

config 支持 name、img、dept（客服名称、头像、说明）和 myName、myImg（自己的名称、头像）。tools 只控制 img、video、file 入口；入口填写已有资源 URL，不负责上传本地文件。

消息结构

const list = [{
  id: 'welcome',
  date: '2026-01-01 09:00:00',
  mine: false,
  name: '在线客服',
  img: '/images/avatar.png',
  text: {
    text: '请选择需要了解的内容',
    list: [{ id: 'help', text: '使用帮助', ask: '如何使用' }]
  }
}]

直接传给 list 的正文使用 text.text，建议提供稳定的 id。通过 pushMsg 追加时，text 也可直接传字符串，组件会规范化，并补齐日期和身份信息。建议项点击后提交 ask，没有 ask 时提交 text。

Events

事件名	触发时机	参数
update:modelValue / change	输入框草稿变化	text: string
submit	文本发送、建议项点击或媒体地址确认	text: string；媒体为 getDetail 生成的 HTML
keysend	点击快捷回复发送	text: string；业务侧决定如何发送
keyadd	新增非空快捷回复	去除首尾空格后的 text: string
message-add	调用 pushMsg 或 rootSendMsg 追加消息	规范化后的消息对象
upload	确认媒体地址	包含 type、src、name、detail 等字段的对象，随后触发 submit(detail)
preview	打开媒体或地图内容	点击内容的 params；文件链接直接打开时不触发该事件
notification-error	系统通知授权请求失败	error

submit 不会自动追加消息，keyadd 不会自动修改 keylist。在业务回调里更新对应数据；使用 pushMsg 后不要再次手动 list.push，以免重复展示。

Methods

通过组件 ref 调用。

方法	参数与返回值	说明
pushMsg	(message) => message	追加消息；mine: true 为自己，默认是对方
rootSendMsg	(textOrContent) => message	追加对方消息；notice 开启时尝试通知
getDetail	(params) => string	生成 img、video、audio、file、map 的消息片段；资源字段为 src，文件可传 name，地图可传 address / latitude / longitude
setScroll	(top?)	下个渲染周期滚动到指定位置，省略参数则到底部

beforeOpen(params, open) 用于处理媒体打开时机，例如在业务确认后调用 open()。地图只提供预览事件，具体地图页面由业务实现。

Slots

名称	位置	参数
header	标题栏附加内容	无
menu	底部工具栏附加内容	无
default	聊天区域旁的自定义内容	无