Компоненты

BaseFormatProps

Базовые свойства форматирования для компонентов, предоставляемых Vue I18n

Подпись:

export interface BaseFormatProps

Подробности

Определения интерфейсов базовых свойств компонентов, таких как Translation, DatetimeFormat и NumberFormat.

i18n

Подпись:

i18n?: Composer;

Подробности

Экземпляр композера с существующей областью видимости.

Эта опция имеет приоритет над опцией scope.

locale

Подпись:

locale?: Locale;

Подробности

Указывает локаль, которая будет использоваться для компонента.

Если указана, глобальная область или локаль родительской области целевого компонента не будут переопределены, и будет использована указанная локаль.

scope

Подпись:

scope?: ComponentI18nScope;

Подробности

Указывает область видимости, которая будет использоваться в целевом компоненте.

Вы можете указать либо global, либо parent.

Если указано global, используется глобальная область, иначе, если указано parent, используется область родителя целевого компонента.

Если родитель имеет глобальную область, используется глобальная область, если локаль — локальная область.

tag

Подпись:

tag?: string | object;

Подробности

Используется для обертывания содержимого слота. Если опущено, содержимое слота обрабатывается как Fragments.

Вы можете указать строковое имя тега, например p, или объект, который определяет компонент.

DatetimeFormat

Компонент форматирования даты и времени

Подпись:

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

Подробности

См. следующие элементы для подробностей о свойствах

DANGER

Не поддерживается IE, из-за отсутствия поддержки Intl.DateTimeFormat#formatToParts в IE

Если вы хотите использовать его, вам нужно использовать полифилл

См. также

• FormattableProps
• BaseFormatProps
• Пользовательское форматирование

DatetimeFormatProps

Свойства компонента DatetimeFormat

Подпись:

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

FormattableProps

Форматируемые свойства

Подпись:

export interface FormattableProps<Value, Format> extends BaseFormatProps

Подробности

Свойства, используемые в компонентах DatetimeFormat или NumberFormat

format

Подпись:

format?: string | Format;

Подробности

Формат, используемый в целевом компоненте.

Укажите строку ключа формата или формат, определенный в API Intl согласно ECMA 402.

value

Подпись:

value: Value;

Подробности

Значение, указанное для целевого компонента

NumberFormat

Компонент форматирования чисел

Подпись:

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

Подробности

См. следующие элементы для подробностей о свойствах

DANGER

Не поддерживается IE, из-за отсутствия поддержки Intl.NumberFormat#formatToParts в IE

Если вы хотите использовать его, вам нужно использовать полифилл

См. также

• FormattableProps
• BaseFormatProps
• Пользовательское форматирование

NumberFormatProps

Свойства компонента NumberFormat

Подпись:

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

Translation

Компонент перевода

Подпись:

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

Подробности

См. следующие элементы для подробностей о свойствах

См. также

• TranslationProps
• BaseFormatProps
• Интерполяция компонентов

Примеры

<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

Свойства компонента Translation

Подпись:

export interface TranslationProps extends BaseFormatProps

keypath

Подпись:

keypath: string;

Подробности

Ключ сообщения локали может быть указан как свойство

plural

Подпись:

plural?: number | string;

Подробности

Выбор числа для множественного числа