#自定义配置

本页列出 Vue 组件 Fluxdown 的公开属性与透传 attributes。除 text 外，顶层属性均可省略；FluxdownRaw 还需要显式传入 plugins。Full、Lite 和 Raw 的其他字段一致。

类型 BaseBuildConfig、StreamingConfig、Theme、IPluginItem 和 FluxdownRef 都可从 @fluxdown/vue 导入。

#text 必选

类型： string

当前完整的 Markdown。收到新片段时，传入累积后的内容；不要只传最后一个片段。

<Fluxdown text="# 你好，Fluxdown" />

#streaming 可选

类型： boolean | StreamingConfig

默认值： false

true 开启末尾语法修复、平滑输出和默认 scale 动画，false 关闭流式行为。传对象可以选择视觉特效并分别控制各项。repairEnding 和 smooth 默认为 true，effect 默认为 'scale'。

<Fluxdown
  :streaming="{
    repairEnding: true,
    smooth: true,
    effect: 'scale',
  }"
  :text="text"
/>

连接数据源与结束流的完整过程见流式内容。

#streaming.repairEnding 可选

类型： boolean

默认值： true（streaming 为对象时）

修复仍在生成的末尾语法。设置为 false 时，只关闭末尾修复；build.repair: false 则关闭全部修复。

#streaming.smooth 可选

类型： boolean | SmoothConfig

默认值： true（streaming 为对象时）

让新增内容逐步显示。true 使用内置弹簧调度，并自动选择可用的时钟；false 直接显示已收到的内容。传对象可以指定时钟和调度方式：

<Fluxdown
  :streaming="{
    smooth: {
      enabled: true,
      ticker: 'raf',
      scheduler: 'spring',
    },
  }"
  :text="text"
/>

#smooth.enabled 可选

类型： boolean

默认值： false

使用 smooth 对象时，显式设为 true 开启平滑输出。关闭后会立即显示当前已收到的内容。

#smooth.ticker 必选

类型： 'raf' | 'interval' | SmoothTickerClass

选择输出节奏的时钟：'raf' 跟随动画帧，'interval' 使用定时器，也可以传自定义时钟类。

#smooth.scheduler 必选

类型： 'spring' | SmoothSchedulerClass

决定每次更新显示多少内容。'spring' 使用内置弹簧调度，也可以传自定义调度类。

通常直接使用 smooth: true 即可。SmoothConfig 从 @fluxdown/vue 导入；SmoothTickerClass 和 SmoothSchedulerClass 从 @fluxdown/core-plugins/plugins/mapper/smooth 导入。

#streaming.effect 可选

类型： boolean | EffectItem | EffectItem[]

默认值： 'scale'（启用流式输出时）

选择动画效果，也可以组合多个效果。支持的输入形式、内置效果、实时演示与配置字段见动画效果。

EffectItem 从 @fluxdown/vue 导入。效果配置类型从对应插件入口导入，例如 ScaleConfig 来自 @fluxdown/core-plugins/plugins/mapper/scale。完整子路径见 Mapper 插件。

#build 可选

类型： BaseBuildConfig

默认值： {}

选择 Markdown 编译能力。表格、任务列表、删除线、自动链接和普通换行默认可用，以下字段均可省略。

<Fluxdown
  :build="{
    tex: true,
    footnote: true,
  }"
  :text="text"
/>

Markdown 内的 HTML 会经过标签检查与清理，默认允许 span、u、br、em 和 a。调整方式见 Rehype 插件。

#build.repair 可选

类型： boolean

默认值： true

是否启用语法修复。false 关闭整组修复；仅控制流式末尾时，使用 streaming.repairEnding。

#build.footnote 可选

类型： boolean

默认值： false

是否解析脚注语法，并生成引用与回跳链接。

#build.tex 可选

类型： boolean

默认值： false

是否解析行内与块级公式语法。开启后，内置渲染器会加载公式渲染能力。

#build.indentedCode 可选

类型： boolean

默认值： false

是否解析缩进代码块语法。围栏代码块无需开启此项。

#build.setextHeading 可选

类型： boolean

默认值： false

是否解析用 === 或 --- 作下划线的标题语法。以 # 开头的标题不受影响。

#build.idPrefix 可选

类型： string

默认值： 自动生成

为脚注 ID 指定命名空间。

通常无需设置 idPrefix。手动设置时，应为页面上的不同实例提供不同值，避免脚注链接指向其他内容。

#theme 可选

类型： Theme

默认值： 'light'

支持三种形式：

• 'light' 或 'dark'：使用内置主题。
• PartialThemeConfig：在浅色主题上覆盖需要的 token。
• ['light' | 'dark', PartialThemeConfig]：在指定主题上覆盖 token。

<Fluxdown
  :theme="[
    'dark',
    {
      tokens: {
        colors: { accent: '#82d8cf' },
        typography: { fontSans: 'Inter, sans-serif' },
      },
    },
  ]"
  :text="text"
/>

tokens 的各组配置都支持局部覆盖：

完整 token 类型为 ThemeTokens，同样从 @fluxdown/vue 导入。搭配产品主题的例子见样式指南。

#plugins 可选

类型： IPluginItem | IPluginItem[]

默认值： []

IPluginItem 从 @fluxdown/vue-plugins/typings 导出。Lite 和 Full 会合并预设与传入的插件，传入的优先级更高。FluxdownRaw 的此参数必填，入口区别见插件矩阵。

一个对象表示一个插件包；数组组合多个插件包。每个包可以提供以下列表：

列表项可以是插件本身，也可以是 [插件, 选项]。使用 config 时，不需要把选项重复写进各个列表项：

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';
import { CodeHeaderSlotPlugin } from '@fluxdown/vue-plugins/plugins/code';

const props = defineProps<{ text: string }>();
</script>

<template>
  <Fluxdown
    :plugins="{
      slots: [CodeHeaderSlotPlugin],
      config: {
        'slot-code-header': { disabled: true },
      },
    }"
    :text="props.text"
  />
</template>

这个例子关闭默认代码工具栏。disabled: true 可停用插件；priority 数值越小越早执行。相同优先级下，后面的 render 先匹配，后面的 slot 通过 Raw 包裹前面的组件。

config 属于插件包，作用于同一个包里明确列出的插件。其他预设会继续保留。

声明、组合和配置示例见使用与编写插件。

#patches 可选

类型： IPatchItem<VNodeChild>[]

默认值： []

用自己的 Vue 内容替换指定文本，或在某个位置插入内容。适合把提及、引用等文本变成可交互元素。

IPatchItem 从 @fluxdown/core 导入，VNodeChild 从 vue 导入。

<script setup lang="ts">
import type { IPatchItem } from '@fluxdown/core';
import type { VNodeChild } from 'vue';

import { Fluxdown } from '@fluxdown/vue';
import { h } from 'vue';

const patches: IPatchItem<VNodeChild>[] = [
  {
    key: 'person-ada',
    range: [3, 7],
    render: () => h('a', { href: '/people/ada' }, '@Ada'),
  },
];
</script>

<template>
  <Fluxdown :patches="patches" text="欢迎，@Ada。" />
</template>

#patches[].key 可选

类型： string

默认值： undefined

补丁的稳定标识。

#patches[].range 必选

类型： number | [number, number]

单个数字表示在该位置插入内容；区间表示替换内容，包含起点、不包含终点。

位置按原始字符串索引计算。区间需要落在同一个内容块内，避免跨段落或相互重叠。

#patches[].render 必选

类型： (text?: string) => VNodeChild

返回插入或替换的内容，也可以通过 text 读取被替换的文本。

#class 可选

类型： Vue class 绑定（字符串、对象或数组）

默认值： undefined

透传到最外层容器的类名，用于接入应用样式。支持 Vue 的字符串、对象与数组绑定，例如 :class="{ active: isActive }"。

<Fluxdown class="conversation-message" :text="text" />

#style 可选

类型： StyleValue

默认值： undefined

最外层容器的 Vue 内联样式，支持字符串、样式对象或这些值组成的数组。StyleValue 从 vue 导入。常用于宽度、布局和与父容器的间距：

<Fluxdown
  :style="{
    maxWidth: '72ch',
    marginInline: 'auto',
  }"
  :text="text"
/>

内容内部的排版优先使用 theme，组件与交互调整使用插件。id、aria-*、data-* 和 DOM 事件监听器等其他 attributes 也会透传到最外层容器。

#ref 可选

类型： Ref<FluxdownRef | null>

默认值： undefined

通过 Vue 模板引用读取渲染结果的响应式句柄。FluxdownRef 是 IReadableClosure<VNodeChild[]>；组件暴露的 value 提供当前内容与订阅能力，不是 DOM 元素。挂载前与卸载后，模板引用为 null。

<script setup lang="ts">
import type { FluxdownRef } from '@fluxdown/vue';

import { Fluxdown } from '@fluxdown/vue';
import { shallowRef } from 'vue';

const props = defineProps<{ text: string }>();
const content = shallowRef<FluxdownRef | null>(null);
</script>

<template>
  <Fluxdown ref="content" :text="props.text" />
</template>

在脚本中，通过 content.value 取得组件句柄；content.value?.value 是 Core 的响应式渲染结果。普通展示无需使用 ref。Fluxdown 会管理句柄的生命周期；自己建立的订阅需要取消。