Components

BaseFormatProps

Props BaseFormat para los componentes que ofrece Vue I18n

Firma:

export interface BaseFormatProps

Detalles

Las definiciones de interfaz de las props subyacentes de componentes como Translation, DatetimeFormat y NumberFormat.

i18n

Firma:

i18n?: Composer;

Detalles

Una instancia de compositor con un alcance existente.

Esta opción tiene prioridad sobre la opción scope.

locale

Firma:

locale?: Locale;

Detalles

Especifica la configuración regional a usar para el componente.

Si se especifica, el alcance global o la configuración regional del alcance principal del componente objetivo no se anularán y se utilizará la configuración regional especificada.

scope

Firma:

scope?: ComponentI18nScope;

Detalles

Especifica el alcance a usar en el componente objetivo.

Puedes especificar global o parent.

Si se especifica global, se usa el alcance global, de lo contrario si se especifica parent, se usa el alcance del padre del componente objetivo.

Si el padre es un alcance global, se usa el alcance global, si es un alcance local, se usa el alcance local.

tag

Firma:

tag?: string | object;

Detalles

Se utiliza para envolver el contenido que se distribuye en la ranura. Si se omite, el contenido de la ranura se trata como Fragmentos.

Puedes especificar un nombre de etiqueta basado en cadena, como p, o el objeto para el cual se define el componente.

DatetimeFormat

Componente de formato de fecha y hora

Firma:

DatetimeFormat: {
    new (): {
        $props: VNodeProps & DatetimeFormatProps & BaseFormatProps;
    };
}

Detalles

Ver los siguientes elementos para obtener detalles sobre las propiedades

DANGER

No compatible con IE, debido a que no hay soporte para Intl.DateTimeFormat#formatToParts en IE

Si quieres usarlo, necesitas usar polyfill

Ver también

• FormattableProps
• BaseFormatProps
• Formato personalizado

DatetimeFormatProps

Props del componente DatetimeFormat

Firma:

export type DatetimeFormatProps = FormattableProps<number | Date, Intl.DateTimeFormatOptions>;

FormattableProps

Props formateables

Firma:

export interface FormattableProps<Value, Format> extends BaseFormatProps

Detalles

Las props utilizadas en los componentes DatetimeFormat o NumberFormat

format

Firma:

format?: string | Format;

Detalles

El formato a usar en el componente objetivo.

Especifica la cadena clave de formato o el formato definido por la API Intl en ECMA 402.

value

Firma:

value: Value;

Detalles

El valor especificado para el componente objetivo

NumberFormat

Componente de formato numérico

Firma:

NumberFormat: {
    new (): {
        $props: VNodeProps & NumberFormatProps & BaseFormatProps;
    };
}

Detalles

Ver los siguientes elementos para obtener detalles sobre las propiedades

DANGER

No compatible con IE, debido a que no hay soporte para Intl.NumberFormat#formatToParts en IE

Si quieres usarlo, necesitas usar polyfill

Ver también

• FormattableProps
• BaseFormatProps
• Formato personalizado

NumberFormatProps

Props del componente NumberFormat

Firma:

export type NumberFormatProps = FormattableProps<number, Intl.NumberFormatOptions>;

Translation

Componente de traducción

Firma:

Translation: {
    new (): {
        $props: VNodeProps & TranslationProps;
    };
}

Detalles

Ver los siguientes elementos para obtener detalles sobre las propiedades

Ver también

• TranslationProps
• BaseFormatProps
• Interpolación de componentes

Ejemplos

<div id="app">
  <!-- ... -->
  <i18n keypath="term" tag="label" for="tos">
    <a :href="url" target="_blank">{{ $t('tos') }}</a>
  </i18n>
  <!-- ... -->
</div>

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    tos: 'Term of Service',
    term: 'I accept xxx {0}.'
  },
  ja: {
    tos: '利用規約',
    term: '私は xxx の{0}に同意します。'
  }
}

const i18n = createI18n({
  locale: 'en',
  messages
})

const app = createApp({
  data: {
    url: '/term'
  }
}).use(i18n).mount('#app')

TranslationProps

Props del componente Translation

Firma:

export interface TranslationProps extends BaseFormatProps

keypath

Firma:

keypath: string;

Detalles

La clave del mensaje de localización puede ser especificada como prop

plural

Firma:

plural?: number | string;

Detalles

La propiedad de elección del número de mensaje plural