AiContent AI 内容显示

AI 内容展示组件用于呈现模型生成的文本，支持打字机输出、流式输出与光标动画，内置轻量 Markdown 渲染，并提供复制、重新生成操作栏及内容与操作栏的插槽自定义。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-ai-content 的用法，可按需组合。

<template>
  <mu-ai-content :content="essay"></mu-ai-content>
</template>

打字机输出

开启后内容按字符逐个输出，输出结束触发 done。

<mu-ai-content typewriter :content="essay" @done="onDone"></mu-ai-content>

流式输出

处于流式输出状态时显示光标，配合 content 的持续更新使用。

<mu-ai-content :content="streamText" :streaming="streaming" @done="onDone"></mu-ai-content>

打字速度

speed 设置定时器间隔，step 设置每次输出的字符数，单位分别为毫秒与字符。

<mu-ai-content typewriter :speed="12" :step="4" :content="essay" :show-actions="false"></mu-ai-content>

光标

控制打字或流式输出时是否显示光标，默认为显示。

<mu-ai-content :content="essay" :cursor="false" :show-actions="false"></mu-ai-content>

操作栏

控制是否显示底部操作栏，默认为显示。

<mu-ai-content :content="essay" :show-actions="false"></mu-ai-content>

复制与重新生成

copyable 与 retryable 控制复制、重新生成按钮的显示，点击后分别触发 copy 与 retry。

<mu-ai-content :content="essay" @copy="onCopy" @retry="onRetry"></mu-ai-content>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
content	要展示的文本内容，支持轻量 Markdown	string	-
streaming	是否处于流式输出状态，为 true 时显示光标	boolean	false
typewriter	是否开启打字机逐字输出	boolean	false
speed	打字机定时器间隔，单位 ms	number	24
step	每次输出的字符数	number	2
cursor	是否显示光标	boolean	true
showActions	是否显示底部操作栏	boolean	true
copyable	是否显示复制按钮	boolean	true
retryable	是否显示重新生成按钮	boolean	true
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
done	打字（流式）输出完成时触发	-
copy	点击复制时触发	text: string
retry	点击重新生成时触发	-

插槽

组件支持以下插槽。

名称	说明
default	自定义内容渲染，替换默认 Markdown 渲染
actions	自定义底部操作栏