Plugin de Vue para formatjs

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Esta biblioteca contiene nuestro plugin para Vue.

Instalación

npm

npm i -S vue-intl

yarn

yarn add vue-intl

Uso

Inicializa el plugin VueIntl con la misma configuración IntlConfig documentada en @formatjs/intl.

import {createIntl} from 'vue-intl'

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

A partir de ahí, puedes usar nuestras APIs de 2 maneras:

Inyección

Especificando inject: {intl: intlKey}, puedes usar toda la API de IntlFormatters documentada en @formatjs/intl.

Nota: intlKey debe importarse desde vue-intl.

API de Composición

También admitimos la API de Composición de Vue con provideIntl y 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',
        })
      )
  },
}

Métodos

También puedes usar nuestros formateadores en plantillas Vue anteponiendo $ como se muestra:

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

Actualmente admitimos:

• $formatMessage

• $formatDate

• $formatTime

• $formatRelativeTime

• $formatTimeRange

• $formatDisplayName

• $formatList

Consulta @formatjs/intl para ver la lista completa de firmas de API.

Herramientas

La cadena de herramientas formatjs es totalmente compatible con vue:

• eslint-plugin-formatjs: Compatibilidad completa con .vue y JS/TS.

• @formatjs/cli: Ahora admitimos extracción de mensajes de archivos SFC .vue.

• babel-plugin-formatjs: Compila mensajes durante el empaquetado para babel.

• @formatjs/ts-transformer: Compila mensajes durante el empaquetado para TypeScript.

Consideraciones

Usando ICU en SFC de Vue

Dado que }} y {{ son tokens especiales en <template> de .vue, esto puede causar conflictos con la sintaxis ICU MessageFormat, por ejemplo:

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

Observa el {# more}} que termina con }}. Esto causará problemas de análisis en tu plantilla vue. Para solucionarlo, recomendamos usar un espacio para convertir }} en } }.

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