Quasar语言包

Quasar语言包作用于Quasar自己组件的国际化,其中一些组件具有标签。

WARNING

应该注意,下面描述的仅是Quasar组件的国际化。 如果您需要国际化自己的组件,请阅读应用国际化 文档页面。

如上所述,一些Quasar组件有自己的标签。在国际化方面,一种选择是通过每个Quasar组件实例(如QTable)上的标签属性配置标签。这是您可以自定义文本以匹配所选语言的方法。但是,这会花费时间并为您的网站/应用添加不必要的复杂性。 相反,您可以使用Quasar语言包,其中包含许多标准标签定义,例如"Cancel", “Clear”, “Select”, "Update"等。无需再翻译这些!它开箱即用。

TIP

有关可用Quasar语言的完整列表,请查看GitHub上的Quasar语言

如果您所需的语言不在该列表中,请随时提交PR以添加它。最多需要5到10分钟。我们欢迎任何语言!

配置默认语言包

除非另有配置(见下文),否则Quasar默认使用en-us语言包。

硬编码默认语言包

如果未动态确定默认的Quasar语言包(例如,不依赖于cookie),则可以:

Quasar CLI

编辑/quasar.conf.js:

framework: {
  lang: 'de'
}

Vue CLI

编辑你的main.js:

import langDe from 'quasar/lang/de'
// ...

// when not selecting to import all Quasar components:
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

// ...
Vue.use(Quasar, {
  // ...,
  lang: langDe
})

Quasar UMD

包含你的Quasar版本的语言包JS标签,并告诉Quasar使用它。 例:

<!-- 在Quasar JS之后包含这个标签 -->
<script src="https://cdn.jsdelivr.net/npm/quasar@v1.0.0/dist/lang/de.umd.min.js"></script>
<script>
  Quasar.lang.set(Quasar.lang.de)
</script>

通过使用$ quasar create <folder> --kit umd生成示例并指定Quasar语言包的语言代码(默认的“en-us”除外),检查您需要在HTML文件中包含哪些标签。

动态选择默认语言

Quasar CLI:如果必须动态选择所需的Quasar语言包(例如:依赖于cookie),则需要创建一个启动文件:$ quasar new boot quasar-lang-pack。 这将创建``/src/boot/quasar-lang-pack.js` 文件。 编辑为:

// for when you don't specify quasar.conf.js > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

export default async () => {
  const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)

  try {
    await import(
      /* webpackInclude: /(de|en-us)\.js$/ */
      `quasar/lang/${langIso}`
      )
      .then(lang => {
        Quasar.lang.set(lang.default)
      })
  }
  catch (err) {
    // Requested Quasar Language Pack does not exist,
    // let's not break the app, so catching error
  }
}

然后将此启动文件注册到/quasar.conf.js

boot: [
  'quasar-lang-pack'
]

始终限制动态导入

请注意Webpack magic commentwebpackInclude的使用。 否则,将捆绑所有可用的语言包,从而导致编译时间和捆绑包大小增加。 请参阅动态导入注意事项

在运行时更改Quasar语言包

使用QSelect动态更改Quasar组件语言的示例:

<template>
  <q-select
    v-model="lang"
    :options="langOptions"
    label="Quasar Language"
    dense
    borderless
    emit-value
    map-options
    options-dense
    style="min-width: 150px"
  />
</template>

<script>
import languages from 'quasar/lang/index.json'
const appLanguages = languages.filter(lang =>
  [ 'de', 'en-us' ].includes(lang.isoName)
)

export default {
  data () {
    return {
      lang: this.$q.lang.isoName
    }
  },

  watch: {
    lang (lang) {
      // dynamic import, so loading on demand only
      import(
        /* webpackInclude: /(de|en-us)\.js$/ */
        `quasar/lang/${lang}`
        ).then(lang => {
        this.$q.lang.set(lang.default)
      })
    }
  },

  created () {
    this.langOptions = appLanguages.map(lang => ({
      label: lang.nativeName, value: lang.isoName
    }))
  }
}
</script>

在App Space中使用Quasar语言包

虽然Quasar语言包仅适用于Quasar组件内部使用,但您仍可以将其标签用于您自己的网站/应用程序组件。

当前Quasar语言包中的“Close”标签是:
{{ $q.lang.label.close }}

查看[GitHub](https://github.com/quasarframework/quasar/tree/dev/ui/lang)上的Quasar语言包,查看$q.lang的结构。

检测区域设置

还有一种Quasar提供的开箱即用的方法可以确定用户区域设置:

// outside of a Vue file

// for when you don't specify quasar.conf.js > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

Quasar.lang.getLocale() // returns a string

// inside of a Vue file
this.$q.lang.getLocale() // returns a string