Code Editor — Vue

@aiao/code-editor-vue 提供 Vue 3 SFC 组件，支持 v-model:value 双向绑定。

安装

npm

npm install @aiao/code-editor-vue

Yarn

yarn add @aiao/code-editor-vue

pnpm

pnpm add @aiao/code-editor-vue

Bun

bun add @aiao/code-editor-vue

Peer dependencies: vue >= 3.5

基础用法

<script setup lang="ts">
import { ref } from 'vue';
import CodeEditor from '@aiao/code-editor-vue';

const code = ref('SELECT * FROM users;');
</script>

<template>
  <CodeEditor v-model:value="code" language="sql" theme="dark" line-wrapping />
</template>

Props

Prop	类型	默认值	说明
value	string	''	编辑器内容
theme	'light' | 'dark'	'light'	主题
language	string	'sql'	语言名称
placeholder	string	''	占位文本
readonly	boolean	false	只读模式
disabled	boolean	false	禁用编辑
setup	'basic' | 'minimal'	'basic'	预设扩展包
indentWithTab	boolean	false	Tab 缩进
indentUnit	string	' '	缩进单位（默认两空格）
lineWrapping	boolean	false	自动换行
highlightWhitespace	boolean	false	高亮空白字符

Events

事件	载荷	说明
update:value	string	v-model:value 更新
change	string	内容变化

v-model 双向绑定

<script setup lang="ts">
import { ref } from 'vue';
import CodeEditor from '@aiao/code-editor-vue';

const code = ref('');
</script>

<template>
  <CodeEditor v-model:value="code" language="typescript" />
  <p>字符数: {{ code.length }}</p>
</template>

并排编辑器

<script setup lang="ts">
import { ref } from 'vue';
import CodeEditor from '@aiao/code-editor-vue';

const sql = ref('SELECT * FROM users;');
const result = ref('');

async function runQuery() {
  const res = await executeQuery(sql.value);
  result.value = JSON.stringify(res, null, 2);
}
</script>

<template>
  <div class="flex gap-4">
    <CodeEditor v-model:value="sql" language="sql" class="flex-1" />
    <CodeEditor :value="result" language="json" readonly class="flex-1" />
  </div>
  <button @click="runQuery">执行</button>
</template>

Vue 特有行为

• readonly + disabled 合并：两者 OR 运算后同时设置 CodeMirror 的 readOnly 和 editable
• 语言匹配：使用 LanguageDescription.matchLanguageName() 静态方法
• indentUnit 默认值：' '（两空格），其他框架为空字符串