Дата последнего изменения: 28.01.2019
Создание глобальных директив |
Перед созданием глобальной директивы рекомендуем проанализировать её необходимость: действительно ли она будет полезна другим компонентам? Если нет, то лучше обойтись созданием локальной директивы (см.
предыдущий урок
Помимо встроенных директив (таких как v-model и v-show), Vue позволяет использовать
ваши собственные.
При этом важно понимать, что основным механизмом создания повторно используемого
кода во Vue всё-таки являются компоненты.
Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские
директивы могут очень пригодиться.
Например, чтобы после загрузки страницы в поле ввода сразу устанавливался фокус.
Штатными средствами такое сделать не получится, поэтому нужно создать свою
"директиву" (специальный атрибут к DOM-элементу).
Это можно сделать двумя способами:
1) зарегистрировать глобальную директиву (для всех компонентов vue)
2) зарегистрировать локально (доступную только в вашем компоненте). Для этого нужно
передать опцию directives
при определении компонента.
Подробнее...
).
Штатные глобальные директивы располагаются в модуле ui в директории /modules/ui/install/js/ui/vue/directives/
.
Все директивы должны быть в виде расширений СoreJS в новом формате. В общем случае ваша директива будет выглядеть следующим образом:
/some-directive/config.php /some-directive/ui.vue.directives.some-directive.js
Cодержимое файла config.php:
<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) { die(); } return array( 'js' => Array( '/bitrix/js/ui/vue/directives/some-directive/ui.vue.directives.some-directive.js', ), 'rel' => array('ui.vue'), 'skip_core' => true, 'bundle_js' => 'ui_vue'.(defined('VUEJS_DEBUG') && VUEJS_DEBUG? '_debug': '') );
В зависимостях обязательно должен быть ui.vue
. Если не используются библиотеки CoreJS
внутри директивы, укажите ключ 'skip_core' => true
.
Содержимое файла ui.vue.directives.some-directive.js:
(function(window) { "use strict"; /** * Some Directive Vue directive * * @package bitrix * @subpackage ui * @copyright 2001-2019 Bitrix */ /* Example of usage: ... */ const SomeClassForDirectiveLogic = { ... }; BX.Vue.directive('bx-some-directive', { bind(element, params) { ... } }); })(window);
Внутри файла указывается пример использования директивы или ссылка на документацию в аннотации JsDoc.
Если требуется сложная логика, можно вынести её за пределы директивы. Если её можно повторно использовать в других модулях и компонентах, рекомендуется вынести за пределы данного расширения.
Для регистрации директивы используется метод BX.Vue.directive
(синтаксис использования полностью совпадает с
Vue.directive
Пользовательские директивы
Помимо встроенных директив (таких как v-model
и v-show
), Vue позволяет использовать ваши собственные. При этом важно понимать, что основным механизмом создания повторно используемого кода во Vue 2.0 всё-таки являются компоненты. Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские директивы могут очень пригодиться.
Подробнее...
).
Имя директивы должно начинаться с префикса bx-
для исключения пересечения с директивами внешних разработчиков.