DDei在线设计器-国际化

国际化

从1.2.42版开始,DDei提供了国际化支持。默认提供了中文/英文两种语言。

编辑器会读取浏览器的语言设置，也能够在初始化时强行指定，默认使用zh_CN(中文)。

本示例基于教程快速指南开发，如果您不清楚怎样引入DDei设计器，请查看教程快速指南。

一、设置语言

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";const options = {config: { currentLayout: "ddei-core-layout-simple",//采用简洁版 // [!code ++]"grid": 0, //网格线 // [!code --]"background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]initData: {controls: [{model: "103008" },]},i18n:{ //国际化设置 // [!code ++:3]lang:'en_US' //设置语言为英文}}
}
</script><template><div style="width:400px;height:400px;margin:100px auto;"><DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView></div>
</template>

实时效果
在这里插入图片描述

二、自定义语言包

除了中文和英文外，也可以自定义语言包。

ja_JP.js

export default {ddei: {file: 'ファイル',new: '新規',open: '開く',save: '保存',abort: '中止',publish: '公開',download: 'ダウンロード',export: 'エクスポート',import: 'インポート',clear: 'クリア',close: '閉じる',collection: 'コレクション',confirm: '確認',...}...
}

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import jaJp from "./ja_JP.js" //导入语言包 // [!code ++]const options = {config: { currentLayout: "ddei-core-layout-simple",//采用简洁版 // [!code ++]"grid": 0, //网格线 // [!code --]"background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]initData: {controls: [{model: "103008" },]},i18n:{ //国际化设置 // [!code ++:6]lang:'ja_JP', //设置语言langs:{      //导入语言包'ja_JP': jaJp}}}
}
</script><template><div style="width:400px;height:400px;margin:100px auto;"><DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView></div>
</template>

实时效果
在这里插入图片描述