# Локализация чисел
Поддержка с версии
🆕 7.0+
Можно выполнять локализацию чисел по соответствующему формату.
Пример формата для чисел:
const numberFormats = {
'en-US': {
currency: {
style: 'currency',
currency: 'USD'
}
},
'ru-RU': {
currency: {
style: 'currency',
currency: 'RUB',
currencyDisplay: 'symbol'
}
}
}
Как указано выше, можно задать числовые форматы (например, currency
для валюты) используя опции ECMA-402 Intl.NumberFormat (opens new window).
После этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию numberFormats
конструктора VueI18n
:
const i18n = new VueI18n({
numberFormats
})
new Vue({
i18n
}).$mount('#app')
Шаблон:
<div id="app">
<p>{{ $n(100, 'currency') }}</p>
<p>{{ $n(100, 'currency', 'ru-RU') }}</p>
</div>
Результат:
<div id="app">
<p>$100.00</p>
<p>100,00 ₽</p>
</div>
# Пользовательское форматирование
Поддержка с версии
🆕 8.10+
Метод $n
возвращает результат в виде строки с полностью отформатированным числом, которую можно использовать лишь целиком. В случаях, когда нужно стилизовать некоторую часть отформатированного числа (например, дробную часть), $n
будет недостаточно. В таких случаях необходимо использовать функциональный компонент <i18n-n>
.
При минимальном наборе свойств <i18n-n>
генерирует тот же результат, что и $n
обернутый в сконфигурированный DOM-элемент.
Шаблон:
<div id="app">
<i18n-n :value="100"></i18n-n>
<i18n-n :value="100" format="currency"></i18n-n>
<i18n-n :value="100" format="currency" locale="ru-RU"></i18n-n>
</div>
Результат:
<div id="app">
<span>100</span>
<span>$100.00</span>
<span>100,00 ₽</span>
</div>
Но по-настоящему оценить удобство компонента можно лишь тогда, когда он применяется с использованием слотов с ограниченной областью видимости (opens new window).
Допустим, есть требование выводить целую часть числа полужирным шрифтом. Реализовать это можно с помощью слота integer
:
<i18n-n :value="100" format="currency">
<span v-slot:integer="slotProps" styles="font-weight: bold">
{{ slotProps.integer }}
</span>
</i18n-n>
Результат:
<span>$<span styles="font-weight: bold">100</span>.00</span>
Можно использовать несколько слотов одновременно:
<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
<span v-slot:currency="slotProps" styles="color: green">
{{ slotProps.currency }}
</span>
<span v-slot:integer="slotProps" styles="font-weight: bold">
{{ slotProps.integer }}
</span>
<span v-slot:group="slotProps" styles="font-weight: bold">
{{ slotProps.group }}
</span>
<span v-slot:fraction="slotProps" styles="font-size: small">
{{ slotProps.fraction }}
</span>
</i18n-n>
(Полученный HTML ниже отформатирован для лучшей читаемости)
<span>
<span styles="color: green">€</span>
<span styles="font-weight: bold">1</span>
<span styles="font-weight: bold">,</span>
<span styles="font-weight: bold">234</span>
<span styles="font-size: small">00</span>
</span>
Определить тип корневого элемента можно указать с помощью входного параметра tag
. Если входной параметр не указан, то по умолчанию будет 'span'
. Также можно указать значение false
, чтобы вставлять дочерние элементы без создания и оборачивания в корневой.
Полный список поддерживаемых слотов, а также другие свойства <i18n-n>
можно найти на странице справочника API.