Views: 3310
Last Modified: 28.04.2022
Class $Bitrix.Loc
Class allows to organize the handling of localizations in Vue components (in application, created via BitrixVue.createApp).
Методы $Bitrix.Loc
|
$Bitrix.Loc.getMessage | Method returns language phrase by ID. |
$Bitrix.Loc.getMessages | Method gets all language phrases, available within Vue application. |
$Bitrix.Loc.setMessage | This method can set language phrases for Vue application. |
|
Also, the article describes the method BitrixVue.getFilteredPhrases that reads the object BX.message
and selects only the phrases related to your Component to be used in the template (selection is performed by prefix).
$Bitrix.Loc.getMessage
Method returns language phrase by ID.
this.$Bitrix.Loc.getMessage(name: string, replacements?: {[key: string]: string}): string;
Parameters:
Parameter | Description
|
name | Phrase string ID. |
replacements | Object with replacements. Allows to replace placeholders with required data (optional parameter, supports reactive properties). |
|
Use inside template:
In text interpolation format:
template: `
UserId is {{ $Bitrix.Loc.getMessage('USER_ID') }}
`
In template parameters:
template: `
<div :title="$Bitrix.Loc.getMessage('FD_LAST_SEEN_MORE_YEAR')">Hover me</div>
`
Please note: function supports a second parameter with replacements. When use method in template or calculated property, replacements will be reactive:
const Counter = {
data()
{
return {
counter: 0
}
},
created()
{
setInterval(() => this.counter++, 1000);
},
// language=Vue
template: `
{{$Bitrix.Loc.getMessage('DEMO_COUNTER', {'#COUNTER#': this.counter})}}
`
};
Use in component:
Access to functions inside the component is performed in the same manner as in any other variable: via this.
. There are nuances of use, however, in the hook beforeCreate and specifics of use are indicated in chapter description.
created()
{
const message = this.$Bitrix.Loc.getMessage('EXAMPLE_PHRASE');
}
beforeCreate()
{
const message = this.$bitrix.Loc.getMessage('EXAMPLE_PHRASE');
}
computed: {
counter()
{
return this.$Bitrix.Loc.getMessage('DEMO_COUNTER', {'#COUNTER#': this.couter});
}
}
$Bitrix.Loc.getMessages
Method for getting all language phrases, available within Vue application.
this.$Bitrix.Loc.getMessages(): object
$Bitrix.Loc.setMessage
This method can set language phrases for Vue application.
Note: Language phrases from components are set automatically and you won't need to set them manually.
If your component operates not only inside Bitrix24 but also as an external widget (online forms, online chat widget), you have to use this method for Vue application to have access to language phrases.
this.$Bitrix.Loc.setMessage(id: string | {[key: string]: string}, value?: string): void;
Parameters:
Parameter | Description
|
id | Phrase string ID. |
value | Phrase value (localization). |
|
Possible variant for calling the method, when the function's first parameter passes the localization object in the format {key1: "value1", ...}
Example:
Access to functions inside the component is performed in the same manner as to any other variable - via this.
. There are, however, nuances of use in the hook beforeCreate. You can find details in the chapter description.
beforeCreate()
{
this.$bitrix.Loc.setMessage('DEMO_COUNTER', 'Counter: #COUNTER#');
this.$bitrix.Loc.setMessage({
DEMO_COUNTER: 'Счетчик: #COUNTER#',
DEMO_PHRASE_2: 'Фраза 2',
});
}
BitrixVue.getFilteredPhrases
The method BitrixVue.getFilteredPhrases reads the object BX.message and selects only the phrases related to your component (selected by prefix) for subsequent use in the template.
This method is rarely used. One of examples is described in the article: Handling localizations.
BitrixVue.getFilteredPhrases(phrasePrefix: string|Array<string>, phrases?: object|null): ReadonlyArray<any>;
Parameters:
Parameter | Description
|
phrasePrefix | Phrase prefix. All phrases, started from with this prefix will be returned in the result. In addition to the indicated string, there is no more option to handle array with prefixes, for example, ['PREFIX_1', 'PREFIX_2'] . |
phrases | Arbitrary set of phrases, optional field. By default, uses the object BX.message. If you use the component as an external widget, then pass this to this parameter (vue component context). |
|
Result:
ReadonlyArray
– returns frozen (Object.freeze) localization object, filtered by specified prefix.
Example:
import {BitrixVue} from 'ui.vue3';
const Component = {
...
computed:
{
localize()
{
return BitrixVue.getFilteredPhrases('PREFIX_');
}
},
...
template: `
{{ localize.PREFIX_PHRASE_1 }}
`
};