0.0.21 • Published 3d ago

@aiao/code-editor-vue

Licence

—

Version

0.0.21

Deps

Size

15 kB

Vulns

Weekly

Summary Dependency Versions

@aiao/code-editor-vue

基于 CodeMirror 6 的 Vue 3 代码编辑器组件。

安装

pnpm add @aiao/code-editor-vue

使用

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

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

<template>
  <CodeEditor
    v-model:value="code"
    @blur="console.log('blur')"
    @focus="console.log('focus')"
    language="typescript"
    theme="dark"
  />
</template>

v-model:value 同步 value / update:value。change 只在用户修改文档时触发，外部 value 更新不会反向触发。

Props

Prop	类型	默认值	行为
`value`	`string`	`''`	动态同步
`theme`	`'light' \| 'dark'`	`'light'`	动态重配置
`language`	`string`	`'sql'`	动态异步加载
`languages`	`readonly CodeEditorLanguageDescription[]`	`SUPPORT_LANGUAGES`	动态替换语言列表
`placeholder`	`string`	`''`	动态重配置
`readonly`	`boolean`	`false`	动态重配置
`disabled`	`boolean`	`false`	动态重配置
`setup`	`'basic' \| 'minimal'`	`'basic'`	动态重配置
`indentWithTab`	`boolean`	`false`	动态重配置
`indentUnit`	`string`	`' '`	动态重配置
`lineWrapping`	`boolean`	`false`	动态重配置
`highlightWhitespace`	`boolean`	`false`	动态重配置
`autoFocus`	`boolean`	`false`	仅初始化时读取
`root`	`Document \| ShadowRoot`	`undefined`	仅初始化时传给编辑器

空字符串或 plaintext 会清空语言扩展。未知语言和加载失败会报告错误并保持纯文本状态。快速切换语言时，只有最后一次请求可以更新当前编辑器。

自定义语言列表使用核心包的公开类型：

import type { CodeEditorLanguageDescription } from '@aiao/code-editor';

declare const myLanguage: CodeEditorLanguageDescription;
const languages: readonly CodeEditorLanguageDescription[] = [myLanguage];

<CodeEditor v-model:value="code" :languages="languages" language="my-language" />

Events

事件	参数	触发时机
`update:value`	`(value: string)`	用户修改文档
`change`	`(value: string)`	用户修改文档
`focus`	`()`	编辑器内容区域获得焦点
`blur`	`()`	编辑器内容区域失去焦点

公开类型

import type { CodeEditorEmits, CodeEditorProps, CodeEditorSetup, CodeEditorTheme } from '@aiao/code-editor-vue';