Работа с локализациями |
Все Vue-компоненты в рамках Bitrix Framework, как и их стандартные php-компоненты, должны иметь поддержку локализаций. Для этого необходимо подготовить
вычисляемое свойство
Вычисляемые свойства и слежение
Встраиваемые в шаблоны выражения удобны, но могут предназначаться только для простых операций. При усложнении логики их труднее поддерживать.
Подробнее...
computed.localize
:
computed: { localize(state) { return BX.Vue.getFilteredPhrases('PREFIX_'); } }
Метод BX.Vue.getFilteredPhrases
прочитает объект BX.message
и выберет только те фразы, которые относятся к вашему компоненту (по префиксу) и добавит их в шаблонизатор.
В шаблоне вы будете использовать их в таком формате:
template: ` <div :title="localize.PREFIX_NAME_TITLE"> <div>{{localize.PREFIX_NAME}}</div> <div v-html="localize.PREFIX_NAME_WITH_HTML"></div> </div> `
Обратите внимание, если вам требуется вставить локализацию вместе с html-разметкой, используйте для этого v-html
. Однако в таком случае вы должны быть уверены, что во фразе нет
XSS-инъекций.
XSS (англ. Cross-Site Scripting — «межсайтовый скриптинг») — тип атаки на веб-системы, заключающийся во внедрении в выдаваемую веб-системой страницу вредоносного кода (который будет выполнен на компьютере пользователя при открытии им этой страницы) и взаимодействии этого кода с веб-сервером злоумышленника. Является разновидностью атаки «Внедрение кода».
Подробнее...
В таком случае, вам нужно будет использовать следующую конструкцию:
computed: { localize(state) { return Object.freeze({ ...BX.Vue.getFilteredPhrases('PREFIX_'), 'PREFIX_NAME_WITH_HTML': removeAllXssFunction(BX.message('PREFIX_NAME_WITH_HTML')) }); } }
Почему нельзя использовать BX.message
внутри шаблона, например, так?
template: ` <div :title="'BX.message('PREFIX_NAME_TITLE')"> <div>${BX.message('PREFIX_NAME')}</div> </div> `
Можно, но такой подход (инъекции в шаблон) не принят в сообществе Vue. Все данные, которые появляются в шаблоне, должны быть внутри шаблонизатора либо как свойства, либо как вычисляемые свойства.
Кроме того, необходимо будет всегда отслеживать, чтобы во фразах не было XSS-уязвимостей.
Если по какой-то причине вы не хотите использовать функцию BX.Vue.getFilteredPhrases
, то можно собрать справочник фраз самостоятельно, используя следующий формат:
computed: { localize(state) { return Object.freeze({ 'PREFIX_NAME_TITLE': BX.message('PREFIX_NAME_TITLE'), 'PREFIX_NAME': BX.message('PREFIX_NAME') }) } }
Подробнее о интерполяции можно прочитать в документации Vue
Интерполяции.
Интерполяции
Наиболее простой способ связывания данных — это текстовая интерполяция с использованием синтаксиса Mustache (двойных фигурных скобок).
Выражение в фигурных скобках будет заменено значением свойства msg соответствующего объекта данных. Кроме того, оно будет обновлено при любом изменении этого свойства.
Подробнее...
Подробнее о вычисляемых свойствах вы можете прочитать в документации Vue
Вычисляемые свойства.
Вычисляемые свойства
Встраиваемые в шаблоны выражения удобны, но могут предназначаться только для простых операций. При усложнении логики их труднее поддерживать.
Подробнее...