Skip to content

国际化

CodeLayout 内部字符串支持多语言,你可以在 CodeLayout 组件的 langConfig 属性中指定语言。

vue
<template>
  <CodeLayout 
    ref="codeLayout"
    :langConfig="langConfig"
    style="height: 400px"
  />
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { CodeLayoutLangConfig } from 'vue-code-layout';

const langConfig = reactive<CodeLayoutLangConfig>({
  lang: 'zh',
});
</script>

覆盖语言文字

如果语言中某个字符串不满足你的要求,可以在 langConfig 中覆盖它。

ts
const langConfig = reactive<CodeLayoutLangConfig>({
  lang: 'zh',
  stringsOverride: {
    togglePanel: '切换面板',
  },
});

添加语言

目前支持中文与英文,但你可以通过接口添加语言,应该在创建 CodeLayout 组件之前调用 addCodeLayoutLang 。

ts
import { addCodeLayoutLang } from 'vue-code-layout';

addCodeLayoutLang('zh', {
  customizeLayout: '自定义布局',
  togglePanel: '切换面板',
  //省略...
});

完整的语言列表可以在源代码 library\Language\en.ts 中查看。

Released under the MIT License.