Zum Hauptinhalt springen

Vue-Plugin für formatjs

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Diese Bibliothek enthält unser Plugin für Vue.

Installation​

npm i -S vue-intl

Verwendung​

Initialisieren Sie das VueIntl-Plugin mit derselben IntlConfig, die in @formatjs/intl dokumentiert ist.

import {createIntl} from 'vue-intl'

const app = createApp(App)
app.use(
  createIntl({
    locale: 'en',
    defaultLocale: 'en',
    messages: {
      foo: 'bar',
    },
  })
)

Von dort aus können Sie unsere APIs auf zwei Arten verwenden:

inject​

Durch Angabe von inject: {intl: intlKey} können Sie die vollständige IntlFormatters-API nutzen, die in @formatjs/intl dokumentiert ist.

Hinweis: intlKey muss aus vue-intl importiert werden.

Composition API​

Wir unterstützen auch Vue's Composition API mit provideIntl & useIntl.

import {createIntl} from '@formatjs/intl'
import {provideIntl, useIntl} from 'vue-intl'

const Ancestor = {
  setup() {
    provideIntl(
      createIntl({
        locale: 'en',
        defaultLocale: 'en',
        messages: {
          foo: 'Composed',
        },
      })
    )
  },
  render() {
    return h(Descendant)
  },
}

const Descendant = {
  setup() {
    const intl = useIntl()
    return () =>
      h(
        'p',
        {},
        intl.formatMessage({
          id: 'foo',
          defaultMessage: 'Hello',
        })
      )
  },
}

Methoden​

Sie können unsere Formatierer auch in Vue-Templates verwenden, indem Sie $ voranstellen:

<template>
  <p>{{ $formatNumber(3, {style: 'currency', currency: 'USD'}) }}</p>
</template>

Wir unterstützen derzeit:

  • $formatMessage

  • $formatDate

  • $formatTime

  • $formatRelativeTime

  • $formatTimeRange

  • $formatDisplayName

  • $formatList

Die vollständige Liste der API-Signaturen finden Sie unter @formatjs/intl.

Werkzeuge​

Die formatjs-Toolchain unterstützt vue vollständig:

Hinweise​

Verwendung von ICU in Vue-SFCs​

Da }} und {{ spezielle Tokens in .vue-<template> sind, kann dies zu Konflikten mit der ICU MessageFormat-Syntax führen, z.B.:

<template>
  <p>
    {{ $formatMessage({ defaultMessage: '{count, selectordinal, offset:1 one {#}
    other {# more}}', }) }}
  </p>
</template>

Beachten Sie {# more}}, das mit }} endet. Dies verursacht Parsing-Probleme in Ihrem vue-Template. Als Lösung empfehlen wir, Leerzeichen zu verwenden, um }} in } } umzuwandeln.

<template>
  <p>
    {{
      $formatMessage({
        defaultMessage:
          '{count, selectordinal, offset:1 one {#} other {# more} }',
      })
    }}
  </p>
</template>