乐趣区

Antdesign-国际化解决方案记录

jiezi

实习参加的第一个需要就是页面国际化，看代码感觉贼简略后果一上手 bug 满天飞，而且一种解决方案往往只实用于一个类型的组件或者数据，换一个类型又得从新想方法……特此记录一下这些解决方案

1. 根本解决方案

参考：www.jianshu.com/p/71e9073df…

我的项目用的是 ant-design-vue + vue-i18n，配置好后将文本替换成 {{$t(‘your name.your key’}} 就能解决最根本的页面文字国际化问题，ant 组件自带文字会主动进行语言切换。

2. Table 表格表头数据解决方案

我的项目需要的第一个难题，表头的数据是写在 data 里的，把下面的办法硬塞进表头数据里是不会进行中英切换的，官网给出的解决办法是把数据放进 computed 中，但我的项目数据是曾经写好了的，我要是瞎挪弄出一堆 bug，组里的人预计会把我吊起来打，最初还是用的监听中英按钮切换而后刷新表头数据的办法。

首先要把切换的值传到对应页面里

changeLocale (localeval) {
      this.localeval = localeval
      if (localeval === EN) {moment.locale(EN)
        this.$i18n.locale = EN
        this.$bus.$emit('changeLocale', 'en-us')// 组件传值
      } else {moment.locale(ZH)
        this.$i18n.locale = ZH
        this.locale = zhCN
        this.$bus.$emit('changeLocale', 'zh-cn')// 组件传值      }
    }

对应页面承受数据：

   mounted() {this.$bus.$on('changeLocale', (param) => {console.log("接管到的值是",param)
      })
    }

而后写刷新表格数据的办法：

   methods(){init() {this.initTable()
     },
      initTable() {const tables = ['tableColumns']
      const allTitle = {
        tableColumns: [
          {title: this.$t('title.one'), // 表头对应的数据
          }, 
          {title: this.$t('title.two'),
          },
          {title: this.$t('title.three'), 
          }, 
          {title: this.$t('title.four'),          
          }, 
            ]      
       }      
        for (let i = 0; i < tables.length; i++) {const line = tables[i] // 用来寻找对应的数据
        this[line] = allTitle[line]
        }
      }
    }

切换时调用就行了

  mounted() {this.$bus.$on('changeLocale', (param) => {this.initTable()
    })
    this.init() // 初始化数据}

3. 带单元格编辑性能的表格解决方案

解决了表头没想到表格里竟然还有要翻译的

如果表格是依照 ant 官网给的写法就很好办了，间接把对应文字替换就行

<a href="javascript:;">{{$t('table.Delete'}}</a>

然而他们把这个字段也写在 data 里了……于是数据又不会变了，塞得还是 html 这下 $t 符齐全没用了，只能在刷新数据时用 if 判断而后输入对应语言了

办法跟下面差不多 加个判断就行了

—— 继续更新 ——

退出移动版