Plugin Vue per formatjs

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Questa libreria contiene il nostro plugin per Vue.

Installazione

npm

npm i -S vue-intl

yarn

yarn add vue-intl

Utilizzo

Inizializza il plugin VueIntl con lo stesso IntlConfig documentato in @formatjs/intl.

import {createIntl} from 'vue-intl'

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

Da qui puoi utilizzare le nostre API in 2 modi:

inject

Specificando inject: {intl: intlKey}, puoi utilizzare l'intera API IntlFormatters documentata in @formatjs/intl.

Nota: intlKey deve essere importato da vue-intl.

Composition API

Supportiamo anche la Composition API di Vue con provideIntl e 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',
        })
      )
  },
}

Metodi

Puoi anche utilizzare i nostri formattatori nel template Vue anteponendo $ come mostrato di seguito:

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

Attualmente supportiamo:

• $formatMessage

• $formatDate

• $formatTime

• $formatRelativeTime

• $formatTimeRange

• $formatDisplayName

• $formatList

Consulta @formatjs/intl per l'elenco completo delle firme delle API.

Strumenti

La toolchain di formatjs supporta completamente vue:

• eslint-plugin-formatjs: Supporta completamente .vue e JS/TS.

• @formatjs/cli: Ora supportiamo l'estrazione di messaggi da file .vue SFC.

• babel-plugin-formatjs: Compila i messaggi durante il bundling per babel.

• @formatjs/ts-transformer: Compila i messaggi durante il bundling per TypeScript.

Avvertenze

Utilizzo di ICU in Vue SFC

Poiché }} e {{ sono token speciali in .vue <template>, ciò può causare potenziali conflitti con la sintassi ICU MessageFormat, ad esempio:

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

Nota il {# more}} che termina con }}. Ciò causerà problemi di parsing nel tuo template vue. Per risolvere il problema, consigliamo di aggiungere uno spazio per trasformare }} in } }.

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