# 如何配置组件多语言
#### 使用说明
通过配置Widget多语言，实现Widget在不同语种环境下都可正常显示。单击[下载链接](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/widget_demo_i18n.zip)，获取样例包"widget_demo_i18n.zip"。
#### 操作步骤
1. 参考[1](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0183.html#astrozero_05_0183__li192661322131815)中操作，模板选择"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"
          }
        ]
      }
      ```
      ![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png)
      在"requires"里增加库文件时，需要注意某些库文件之间有依赖关系，增加库文件需要有先后顺序，例如"global_VueI18n"是基于"global_Vue"的，需要写在"global_Vue"之后。依赖关系的详细介绍，请参见[如何引入第三方库](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0187.html)。
      
   
   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](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0183.html#astrozero_05_0183__li115551942524)中操作，在组件库中上传该Widget包。
3. 打开一个高级页面，在设计页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286025.png)，从"自定义"组件中拖出刚创建的Widget至右侧空白页面。
4. 单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046896.png)，保存高级页面。
5. 切换环境语言，在不同语种下，在页面中选中拖出的Widget，会在右侧显示该组件的属性配置面板，查看Widget属性是否符合预期。 
   图1中文环境下Widget属性   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126221.png "点击放大")
   图2英文环境下Widget属性   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887512.png "点击放大")