TypingIndicator 打字中

聊天界面内联的输入中与加载状态指示器

已验证自 1.0.0

用法

基础

示例加载中...

变体

variant 选择样式，每种变体有各自的尺寸 prop。

示例加载中...

最佳实践

内联聊天行与紧凑的助手占位用默认的 dots。
空间充足、需要品牌化的生成状态时用 ai。
工具栏、消息元信息行或骨架屏旁用 pure、ring、circle-dash 或 bars。
保持 showText=true，除非相邻的可见标签已说明在等待什么。
同一段对话中不要混用多种变体。

API 参考

属性

属性名	类型	默认值	说明
`variant`	`'dots' \| 'ai' \| 'pure' \| 'ring' \| 'circle-dash' \| 'bars'`	`'dots'`	指示器样式。
`text`	`string`	`'Typing…'`	`showText` 开启时显示的文案。
`showText`	`boolean`	`true`	显示文案。
`ariaLabel`	`string`	-	`showText` 关闭时供读屏朗读的文案；缺省时用 `text`。
`size`	`number`	`6`	`dots` 的圆点直径（px）。
`gap`	`number`	`5`	`dots` 的圆点间距（px）。
`loaderSize`	`number`	`44`	`ai` 的尺寸（px）。
`pureSize`	`number`	`14`	`pure` 的直径（px）。
`ringSize`	`number`	`18`	`ring` 的直径（px）。
`ringThickness`	`number`	`2`	`ring` 的线宽（px）。
`circleDashSize`	`number`	`18`	`circle-dash` 的直径（px）。
`circleDashThickness`	`number`	`2`	`circle-dash` 的线宽（px）。
`circleDashDashDeg`	`number`	`12`	`circle-dash` 的虚线段角度（deg）。
`circleDashGapDeg`	`number`	`12`	`circle-dash` 的间隔角度（deg）。
`barsSize`	`number`	`12`	`bars` 的高度（px）。

CSS 变量

变量	来源	说明
`--tx-typing-indicator-color`	`--tx-text-color-secondary`	所有变体的颜色，一处即可改色。

概述

根节点为 role="status"、aria-live="polite"；指示器图形均为 aria-hidden。
showText 关闭时仍渲染视觉隐藏的文案（ariaLabel，缺省时为 text），读屏照常朗读。

技术实现

ai 变体用 SVG mask 绘制，mask id 按实例生成，同页多个实例互不干扰。
源码：packages/tuffex/packages/components/src/chat/src/TxTypingIndicator.vue。

packages/tuffex/packages/components/src/chat/index.ts