@composy/formula-vue

@composy/formula-vue

面向 Vue 3 的公式编辑器组件和 useFormulaEditor composable，底层由 @composy/formula-core 提供渲染与编辑能力。

安装

pnpm add @composy/formula-vue @composy/formula-core katex

组件

<script setup lang="ts">
import { FormulaEditor } from '@composy/formula-vue'
import { ref } from 'vue'

const formula = ref(String.raw`\int_0^1 x^2\,dx`)
</script>

<template>
  <FormulaEditor
    v-model="formula"
    mode="editor"
    theme="light"
    aria-label="LaTeX 公式输入"
    @change="value => console.info(value)"
    @error="error => console.error(error)"
  />
</template>

mode、主题、工具栏、无障碍名称、KaTeX 选项及其他编辑器 props 会在组件存活期间同步更新。由父级更新 modelValue 时，组件会同步输入框而不额外回发 update:modelValue。

事件：update:modelValue、change 接收公式字符串；focus、blur 不带参数；error 接收 Error。

Template ref

<script setup lang="ts">
import { FormulaEditor } from '@composy/formula-vue'
import { ref } from 'vue'

const editor = ref<InstanceType<typeof FormulaEditor>>()
</script>

<template>
  <FormulaEditor ref="editor" />
</template>

组件暴露 instance、value、focus、blur、insert、setValue、clear、updateConfig、setTheme、setDisabled、setReadonly 和 setMode。

Composable 与插件

import { useFormulaEditor } from '@composy/formula-vue/composables'

const { create, updateConfig, setReadonly, destroy } = useFormulaEditor()

const container = document.getElementById('formula')
if (container) create(container, { value: String.raw`x^2` })
updateConfig({ mode: 'display' })
setReadonly(true)
destroy()

Composable 在所属 Vue 组件卸载时销毁实例。需要全局注册时，可通过 app.use(createFormulaPlugin()) 安装插件。

运行时同步与错误事件

组件会把 props 变化转换为增量配置更新。未设置且未发生变化的可选 props 不会覆盖 Core 默认值；把曾经设置的 katexCssUrl、输入尺寸或其他可选项移除后，会恢复默认行为。

渲染失败通过 error 事件传出一次，payload 是 Error。如果同时使用 useFormulaEditor，composable 内部仍会保留错误状态，但不应再额外 watch 该状态并重复 emit。

样式

编辑器会注入自身结构样式。应用仍需加载 LDesign color 和 size 主题变量；深浅模式使用 --ld-* tokens。