Как создать собственную пользовательскую директиву в Vue 3 за 2 минуты

Руководство о том, как за считанные минуты приступить к созданию собственной пользовательской директивы в Vue.js.

Как вы, возможно, уже знаете, Vue.js поставляется с множеством различных нативных директив, которые вы можете использовать. Существуют такие директивы, как v-for, v-if, v-show и многое другое. Все они очень мощные и действительно полезные. Однако в некоторых случаях вам может потребоваться создать собственную настраиваемую директиву, поскольку вам нужна какая-то функциональность, которая изначально не встроена в Vue.

К счастью, создание пользовательских директив в Vue.js очень просто. В этой статье я покажу вам, как вы можете приступить к созданию собственной пользовательской директивы за считанные минуты.

Создание пользовательской директивы

Чтобы сделать эту статью как можно более простой, мы создадим очень простую директиву, которая добавляет пунктирную рамку к элементу с цветом по нашему выбору. Это должно дать вам представление о том, как начать создавать собственные директивы. Этот пример, вероятно, не то, что вы бы сделали в реальном приложении, но опять же, это просто для демонстрации того, как вы можете создать директиву. Как только вы поймете, как их создавать, я уверен, что вы сможете масштабировать их и начать создавать еще более сложные директивы.

Прежде всего, нам нужно использовать функцию directive() в приложении. Это принимает два аргумента. Название директивы и сама директива.
Давайте попробуем это настроить. Начните с открытия файла main.ts (или js) в папке src.

....
const app = createApp(App);
//Register the directive + functionality
app.directive("dashed-border", {
  beforeMount: (el, { value }) => {
    el.style.border = `1px dashed ${value}`;
  },
});

Как видно из приведенного выше примера, мы регистрируем директиву с именем dashed-border с некоторыми функциями. Как вы могли заметить, мы берем элемент, к которому хотим применить директиву, и добавляем к нему некоторые стили.

Это позволяет нам использовать его в наших элементах HTML следующим образом:

<div v-dashed-border="'#f00'">Hi! My name is Vue</div>

Если вы запустите это, вы сможете увидеть что-то вроде:

Хорошая работа! Теперь у вас есть рабочая директива.
Обратите внимание, что красная рамка исходит из аргумента, указанного при добавлении директивы к элементу:

<div v-dashed-border="'#f00'"> <----- The red color

Теперь представьте, что у вас много разных директив, файл main.ts будет очень быстро загроможден. Хорошая идея — разделить каждую директиву на отдельный файл. Для этого создайте новый файл .ts — сохраните его в: directives/dashed-border.ts и добавьте следующий код:

import { App } from 'vue';

const directiveDashedBorder = (app: App<Element>) => {
  return app.directive("dashed-border", {
    beforeMount: (el, { value }) => {
      el.style.border = `1px dashed ${value}`;
    },
  });
}

export default directiveDashedBorder;

Чтобы использовать это, нам нужно немного изменить main.ts:

.....
import directiveDashedBorder from './test-directive';
const app = createApp(App);
// Custom directives
directiveDashedBorder(app);

Запустите приложение еще раз, и вы должны увидеть тот же результат, что и раньше.
Вот и все! Видите, как легко начать создавать свои собственные директивы? Мне любопытно, какую директиву вы будете строить дальше? Пожалуйста, дайте мне знать в комментариях.

Спасибо за чтение, и я надеюсь, что вам понравилась статья, если да, пожалуйста, поддержите меня, нажав кнопку хлопка.

P.S. Во-первых, вы должны получать мои сообщения в свой почтовый ящик. Сделай это здесь!

Во-вторых, если вам нравится работать с Medium, подумайте о том, чтобы поддержать меня и тысячи других авторов, подписавшись на членство. Это стоит всего 5 долларов США в месяц, это очень поддерживает нас, писателей, и у вас также есть шанс заработать на своих произведениях и донести свои произведения до тысяч людей. Зарегистрировавшись по этой ссылке, вы поддержите меня напрямую частью своего гонорара, это не будет стоить вам больше. Если вы это сделаете, спасибо вам миллион раз.

Если вы хотите как-нибудь связаться со мной, подпишитесь на меня в Твиттере| LinkedIn или просто посетите мой веб-сайт.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.