更新时间:2022-04-26 GMT+08:00
分享

如何配置组件多语言

您可以通过配置Widget多语言,使得Widget在不同语种环境下都可正常显示。

场景描述

单击下载链接获取样例包“widget_demo_i18n.zip”,介绍在Vue技术栈下,使用VueI18n实现Widget的国际化。

操作步骤

  1. 参考1,模板选择“widgetVueTemplate”新建Widget。示例开发包为“widget_demo_i18n.zip”。

    1. 增加“messages-en.json”和“messages-zh.json”国际化资源文件,“messages-zh.json”中需要使用unicode编码。

      “messages-zh.json”文件内容如下。

      {
      	"zh-CN": {
      		"name" : "\u540d\u79f0"				
      	}
      }

      “messages-en.json”文件内容如下。

      {
      	"en-US": {
      		"name" : "name"				
      	}
      }
    2. 在“packageinfo.json”文件中增加i18n节点,指定国际化资源文件的文件名。并增加requires节点,指定需要依赖的Vue和VueI18n库,其中库文件名称和版本号在库详情页面获取。
      {
        "widgetApi": [
          {
            "name": "widget_demo_i18n"
          }
        ],
        "widgetDescription": "widget i18n demo",
        "authorName": "test",
        "width": "",
        "height": "",
        "i18n": [
          {
            "name": "messages-en"
          },
          {
            "name": "messages-zh"
          }
        ],
        "requires": [{
            "name": "global_Vue",
            "version": "100.7"
          },
      	{
            "name": "global_VueI18n",
            "version": "100.7"
          },
          {
            "name": "global_Element",
            "version": "100.8"
          }
        ]
      }

      在“requires”里增加库文件时,需要注意某些库文件之间有依赖关系,增加库文件需要有先后顺序,例如“global_VueI18n”是基于“global_Vue”的,需要写在“global_Vue”之后。具体的依赖关系可参考如何引入第三方库

    3. 在“widget_demo_i18n.js”的render方法中,使用平台提供的“HttpUtils.getI18n”方法返回一个“i18n”变量。然后新建Vue实例传入该“i18n”变量。
      			var i18n = HttpUtils.getI18n({
      				locale: HttpUtils.getLocale(),
      				messages: thisObj.getMessages()
      			});
      			
                  var vm = new Vue({
      				el: $("#widget_demo_i18n", elem)[0],
      				i18n: i18n,
      				data: {
      					form: {
      						name: "miao"	
      					}
      				}
      			})
    4. 在“widget_demo_i18n.ftl”中通过VueI18n提供的“$t”方法使用国际化资源。
      <div id="widget_demo_i18n">
      	<el-form :model="form" :inline="true">
      		<el-form-item :label="$t('name')">
      			<el-input v-model="form.name"></el-input>
      		</el-form-item>
      	</el-form>
      </div>

  2. 参考6在组件库中上传该Widget包。
  3. 打开一个高级页面,在设计页面左上方单击,从“自定义”组件中拖出刚创建的Widget至右侧空白页面。
  4. 单击页面上方保存图标进行保存。
  5. 切换环境语言,在不同语种下,在页面中选中拖出的Widget,会在右侧显示该组件的属性配置面板。查看Widget属性是否符合预期。

    图1 中文环境下Widget属性
    图2 英文环境下Widget属性

分享:

    相关文档

    相关产品

close