国际化

  从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",//采用简洁版
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    initData: {
      controls: [
        {
          model: "103008" 
        },
      ]
    },
    i18n:{ //国际化设置
      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" //导入语言包

const options = {
  config: { 
    currentLayout: "ddei-core-layout-simple",//采用简洁版
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    initData: {
      controls: [
        {
          model: "103008" 
        },
      ]
    },
    i18n:{ //国际化设置
      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>

实时效果

技术支持

QQ:3697355039

微信公众号:ddei757