Skip to content
关注微信公众号,获取最新动态
官方QQ交流群:985558286

国际化

FormMaking V3 目前支持两种语言(中文简体zh-cn、英文en) 默认使用英文,可以通过下面配置修改:

js
app.use(FormMakingV3, {
  locale: 'zh-cn'
  // locale: 'en'
})

多语言项目中使用

legacy

js
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: true,
  messages: {
    'en': {},
    'zh-cn': {}
  }
})

app.use(FormMakingV3, {
  locale: 'en',
  i18n // 需要将配置的 i18n 传入到组件中
})
app.use(i18n)

Composition API

js
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,
  globalInjection: true, // 在所有组件中都可以使用 $i18n $t $rt $d $n $tm
})

app.use(FormMakingV3, {locale: 'zh-cn', i18n})
app.use(i18n)

TIP

FormMakingV3 使用的是 legacy 模式,此处需要配置 globalInjection: true

vue
<template>
  <a href="/">{{t('home')}}</a>

  <select v-model="locale">
    <option value="en">en</option>
    <option value="zh-cn">zh-cn</option>
  </select>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
  
const { t, locale } = useI18n({
  locale: 'zh-cn',
  useScope: 'global',
  messages: {
    en: {
      home: 'Home'
    },
    'zh-cn': {
      home: '首页'
    }
  }
})

locale.value = 'en' // 动态语言切换
</script>