国际化

  DFlow提供了国际化支持。默认提供了中文/英文两种语言。

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

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

一、设置语言

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import DDeiFlow from "ddei-flow";

const options = {
  config: { 
    height:500,
    initData: {
      controls: [
        {
          model: "1000011",
        },
      ]
    }
  },
  //配置扩展插件
  extensions: [
    DDeiFlow
  ],
  i18n:{ //国际化设置  [!code ++:3]
    lang:'en_US' //设置语言为英文
  }
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" id="dflow_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果

二、自定义语言包

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

ja_JP.js

export default {
  ddei: {
    flow: {
      startevent: '開始イベント',
      endevent: '終了イベント',
      boundaryevent: '境界イベント',
      intermediatecatchevent: '中間キャッチ',
      intermediatethrowevent: '中間スロー',
    },
    .....
    file: 'ファイル',
    new: '新規',
    open: '開く',
    save: '保存',
    abort: '中止',
  ...
  }
  ...
}

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import DDeiFlow from "ddei-flow";
import jaJp from "./ja_JP.js" //导入语言包

const options = {
  config: { 
    height:500,
    initData: {
      controls: [
        {
          model: "1000011",
        },
      ]
    }
  },
  //配置扩展插件
  extensions: [
    DDeiFlow
  ],
  i18n:{ //国际化设置
    langs:{
      ja_JP:jaJp
    },
    lang:'ja_JP' //设置语言为日文
  }
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" id="dflow_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果

技术支持

QQ:3697355039

微信公众号:ddei757