> For AI agents: the complete documentation index is available at /vue-codemirror6/zh/llms.txt, the full documentation bundle is available at /vue-codemirror6/zh/llms-full.txt.

# 国际化

CodeMirror 会显示自己的界面文字,例如搜索和替换面板、折叠标记、代码检查面板以及屏幕阅读器的朗读内容等。将翻译表传给 `phrases` 属性即可对其进行本地化。键是原始的英文字符串。完整的键列表请参阅 CodeMirror 的 [翻译示例](https://codemirror.net/examples/translate/)。

## 翻译表

下面的示例将 vue-codemirror6 用作 Markdown 编辑器,并将界面翻译为中文。键按使用它们的包分组;只需写出需要翻译的键即可。

```vue
<script lang="ts" setup vapor>
import { markdown } from '@codemirror/lang-markdown';
import { ref } from 'vue';
import CodeMirror from 'vue-codemirror6';

const value = ref('');
const lang = markdown();

/**
 * 界面翻译(本例为中文)
 *
 * @see {@link https://codemirror.net/examples/translate/}
 */
const phrases: Record<string, string> = {
  // @codemirror/view
  'Control character': '控制字符',
  // @codemirror/commands
  'Selection deleted': '已删除所选内容',
  // @codemirror/language
  'Folded lines': '已折叠的行',
  'Unfolded lines': '已展开的行',
  to: '至',
  'folded code': '已折叠的代码',
  unfold: '展开',
  'Fold line': '折叠行',
  'Unfold line': '展开行',
  // @codemirror/search
  'Go to line': '跳转到行',
  go: '确定',
  Find: '查找',
  Replace: '替换',
  next: '下一个',
  previous: '上一个',
  all: '全部',
  'match case': '区分大小写',
  'by word': '全字匹配',
  regexp: '正则表达式',
  replace: '替换',
  'replace all': '全部替换',
  close: '关闭',
  'current match': '当前匹配',
  'replaced $ matches': '已替换 $ 处匹配',
  'replaced match on line $': '已替换第 $ 行的匹配',
  'on line': '所在行',
  // @codemirror/autocomplete
  Completions: '自动补全',
  // @codemirror/lint
  Diagnostics: '诊断',
  'No diagnostics': '无诊断信息'
};
</script>

<template>
  <code-mirror v-model="value" basic :lang="lang" :phrases="phrases" />
</template>
```

`replaced $ matches` 等键中的 `$` 是占位符,CodeMirror 会将其替换为数字。请在译文中保留它。

## 配合 vue-i18n 切换语言

`phrases` 是响应式的。修改它时只会重新配置编辑器而不会重新创建,因此可以通过 `computed` 跟随 vue-i18n 的当前语言:

```vue
<script lang="ts" setup vapor>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import CodeMirror from 'vue-codemirror6';

const { locale } = useI18n();

/** 各语言的翻译表 */
const phrasesByLocale: Record<string, Record<string, string>> = {
  zh: {
    Find: '查找',
    Replace: '替换',
    close: '关闭'
    // ...
  },
  en: {} // 留空时使用 CodeMirror 默认的英文文本
};

const phrases = computed(() => phrasesByLocale[locale.value]);
</script>

<template>
  <code-mirror basic :phrases="phrases" />
</template>
```

:::tip
翻译表中缺少的键会使用 CodeMirror 的英文文本,因此只翻译一部分也没有问题。
:::