自定义指令本地化

支持的版本

🆕 7.3 新增

你不仅可以使用 $t 方法进行翻译,还可以使用 v-t 自定义指令。

字符串语法

你可以使用字符串语法传递语言环境信息的键名路径。

JavaScript:

  1. new Vue({
  2. i18n: new VueI18n({
  3. locale: 'en',
  4. messages: {
  5. en: { hello: 'hi there!' },
  6. ja: { hello: 'こんにちは!' }
  7. }
  8. }),
  9. data: { path: 'hello' }
  10. }).$mount('#string-syntax')

模板:

  1. <div id="string-syntax">
  2. <!-- 字符串 -->
  3. <p v-t="'hello'"></p>
  4. <!-- 通过数据进行键名路径绑定 -->
  5. <p v-t="path"></p>
  6. </div>

输出:

<div id="string-syntax">
  <p>hi there!</p>
  <p>hi there!</p>
</div>

对象语法

你可以使用对象语法。

Javascript:

new Vue({
  i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { hello: 'hi {name}!' },
      ja: { hello: 'こんにちは、{name}!' }
    }
  }),
  computed: {
    nickName () { return 'kazupon' }
  },
  data: { path: 'hello' }
}).$mount('#object-syntax')

模板:

<div id="object-syntax">
  <!-- 文字 -->
  <p v-t="{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }"></p>
  <!-- 通过 `data` 绑定数据 -->
  <p v-t="{ path: path, args: { name: nickName } }"></p>
</div>

输出:

<div id="object-syntax">
  <p>こんにちは、kazupon!</p>
  <p>hi kazupon!</p>
</div>

使用翻译

支持版本

🆕 8.7 新增

v-t 指令应用于 <transition> 组件自定义指令本地化 - 图1内的元素时,你可能会注意到过渡动画之后的翻译过的信息会消失。这与 <transition> 组件实现的方式有关——在过渡开始之前<transition> 组件内消失元素中的所有指令都将被销毁。此行为可能导致内容在短过渡时闪烁,但在长过渡时最明显。

为了确保在转换期间指令内容不会被触及,只需将.preserve 修饰符添加到 v-t 指令定义中。

Javascript:

new Vue({
  i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { preserve: 'with preserve' },
    }
  }),
  data: { toggle: true }
}).$mount('#in-transitions')

模板:

<div id="in-transitions">
  <transition name="fade">
    <span v-if="toggle" v-t.preserve="'preserve'"></span>
  </transition>
  <button @click="toggle = !toggle">Toggle</button>
</div>

也可以在 VueI18n 实例本身设置全局设置,这将对没有修饰符的所有 v-t 指令产生影响。

Javascript:

new Vue({
  i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { preserve: 'with preserve' },
    },
    preserveDirectiveContent: true
  }),
  data: { toggle: true }
}).$mount('#in-transitions')

模板:

<div id="in-transitions">
  <transition name="fade">
    <span v-if="toggle" v-t="'preserve'"></span>
  </transition>
  <button @click="toggle = !toggle">Toggle</button>
</div>

关于上面的例子,请参阅示例自定义指令本地化 - 图2

$t vs v-t

$t

$t 是扩展的 Vue 实例方法, 它有以下优点和缺点:

优点

你可以灵活地在模板以及 Vue 实例的计算属性和方法中使用 mustash 语法 {{}}

缺点

$t每次重新渲染时都会被执行,因此它确实有翻译成本。

v-t

v-t 是一个自定义指令,它有以下优点和缺点:

优点

v-t$t 方法具有更好的性能,因为在一次翻译时自定义指令会进行缓存。此外可以使用由 vue-i18n-extensions自定义指令本地化 - 图3 提供的 Vue 编译器模块进行预翻译。

因此,可以进行更多性能优化

缺点

v-t 不能像 $t 一样灵活使用,它更复杂。带有 v-t 的翻译内容会被插入到元素的 textContent 中。此外,当你使用服务器渲染时,你需要设置自定义指令自定义指令本地化 - 图4createRenderer 函数的 directives 选项。