vue-i18n的一些使用

init-qy大约 1 分钟

开始

在使用 vue 编写大型项目时，经常使用的一种国际化方案为 Vue i18n。

其中大部分的使用看官网open in new window就够了,这里仅记录一些在实际使用中的问题。

问题

t()和 tc()
这两个方法在大部分情况下展现一致，以至于经常有人混用。事实上，在大部分情况下都应该使用 t()，tc()方法适用于复数，它会让 ‘|’ 无法展示。源码中 tc()有这么一段：

const choices = message.split("|"); // line:1807

因此，如果你的 message 中含有 ‘|’，请不要使用 tc()。

复用性
在一些 form 表单中,实现 i18n 可能会显得非常繁复,很多 i18n 的字段只有一个地方会用到,比如一个简单的 form 表单:

<el-form
  :model="numberValidateForm"
  ref="numberValidateForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '请输入年龄'}
    ]"
  >
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off" placeholder="请输入年龄"></el-input>
  </el-form-item>
</el-form>

在这个 form 表单中,'年龄'需要 i18n,'请输入年龄'也需要,这样 i18n 就占了两行

{
  "age": "年龄",
  "agePlaceholder": "请输入年龄"
}

每个字段的 i18n 就是两倍的工作量,如果 i18n 还分了模块,代码就变得冗余:$('modelA.modelB.age')和$('modelA.modelB.agePlaceholder')
对于这种情况,完全可以写一个方法来代替,如

    placeholder(key, inputType = 0, lengthOption = { min: 1, max: 128 }) {
      // 1 input 2 pick 3 length
      const name = this.$t(`modelA.modelB.${key}`);
      if (inputType === 0) {
        return name;
      } else if (inputType === 1) {
        return this.$t('modelA.modelB.nullPrompt') + name;
      } else if (inputType === 2) {
        return this.$t('modelA.modelB.nullPick') + name;
      } else if (inputType === 3) {
        return name + this.$t('modelA.modelB.nameLength', lengthOption);
      }
    },

vue-i18n的一些使用

# 开始

# 问题

开始

问题