> For AI agents: the complete documentation index is available at https://docs.halo.run/llms.txt, the full documentation bundle is available at https://docs.halo.run/llms-full.txt.

# VCodemirror

此组件封装了 Codemirror 代码编辑器，适用于一些需要编辑代码的场景。

## 使用方式

```vue
<script lang="ts" setup>
import { ref } from "vue";

const value = ref("");
</script>

<template>
  <VCodemirror v-model="value" height="300px" language="html" />
</template>
```

## Props

| 属性名          | 类型                                              | 默认值       | 描述                       |
| ------------ | ----------------------------------------------- | --------- | ------------------------ |
| `modelValue` | string                                          | ""        | 可选，绑定到组件的字符串值，默认为空字符串。   |
| `height`     | string                                          | auto      | 可选，组件的高度，默认为 `"auto"`。   |
| `language`   | keyof typeof presetLanguages \| LanguageSupport | yaml      | 代码编辑器的语言支持，默认为 `"yaml"`。 |
| `extensions` | EditorStateConfig\["extensions"]                | () => \[] | 可选，编辑器状态配置的扩展，默认为一个空数组。  |

## Emits

| 事件名称              | 参数                         | 描述         |
| ----------------- | -------------------------- | ---------- |
| update:modelValue | `value`: string 类型，表示模型值。  | 当模型值更新时触发。 |
| change            | `value`: string 类型，表示变更的值。 | 当值发生变化时触发。 |