【问题标题】:i18n : translate a sentence that one of words is boldi18n : 翻译一个单词是粗体的句子
【发布时间】:2022-01-18 06:43:40
【问题描述】:

我想翻译这个句子 in i18n

Select <b>branch(s)</b> you want to send selected product
after selecting Branch Click on submit

如您所见,上面句子中的一个单词在&lt;b&gt;标签中。

我有这个解决方案,但我确定这是不是最好的方法。

$t('part1') <b>$t('part2')</b>  $t('part3')

那么,你知道更好的方法来翻译这个吗??

【问题讨论】:

标签: vue.js internationalization nuxt.js vue-i18n


【解决方案1】:

根据您的要求,我们必须翻译包含 HTML 标记的消息/句子。

你在OP中提到的解决方案$t('part1') &lt;b&gt;$t('part2')&lt;/b&gt; $t('part3'),管理难度大,复杂。您可以使用i18n functional component 避免它。例如 :

您的语言 JSON 将如下所示:

const messages = {
  en: {
    info: 'Select {branchText} you want to send selected product after selecting Branch Click on submit.',
    subText: 'branch(s)',
  }
}

模板将如下所示:

<i18n path="info" tag="p">
  <template v-slot:branchText>
    <b>{{ $t('subText') }}</b>
  </template>
</i18n>

希望这个答案会有所帮助!谢谢。

【讨论】:

  • ...虽然我同意在这种情况下您可以完全控制 HTML,但使用 v-html 也可以
  • @MichalLevý 我会说,谁知道呢:安全总比后悔好。如果它增加了一层安全性(如果您的语言环境文件存储在不太安全的地方或暴露给您的产品团队 idk),那么这样就可以了。当然,您也可以在v-html 上添加消毒剂。
最近更新 更多