如何配置组件多语言

使用说明

通过配置Widget多语言，实现Widget在不同语种环境下都可正常显示。单击下载链接，获取样例包“widget_demo_i18n.zip”。

操作步骤

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属性