Лабораторна робота №4. Плагіни та директиви

Тема: Створення пагіниів та директив

Теоретичні відомості

Плагіни - самодостатня одиниця коду, яка додає до Vue функціональність глобального рівня.

Для плагінів немає строго обмеженої області застосування, але до поширених сценаріїв, де плагіни корисні, відносяться:

  • Додавання глобальних методів або властивостей (наприклад, vue-custom-element).
  • Додавання одного чи кількох глобальних ресурсів: директиви/переходи тощо. (наприклад, vue-touch).
  • Додавання опцій компоненту за допомогою глобальних домішок (наприклад, vue-router).
  • Додавання глобальних методів екземпляра через config.globalProperties.

Щоб краще зрозуміти, як створювати власні плагіни Vue.js, реалізуємо спрощену версію плагіна для відображення локалізованих рядків. При додаванні плагіна до програми буде викликано метод install(якщо вказувався об'єкт) або викликана сама функція (при використанні function). В обох випадках вона отримує два параметри - об'єкт app, що є результатом виклику createApp та параметри, передані користувачем. Почнемо з реалізації об'єкта плагіна. Рекомендується створювати його в окремому файлі та експортувати, як показано у наступному прикладі:

// plugins/i18n.js
export default {
    install: (app, options) => {
        // Код плагіну
    }
}

Зручно, якщо функція для відображення локалізованого рядка по ключу буде доступна у всьому додатку, тому оголосимо його за допомогою app.config.globalProperties.

Функція отримуватиме рядок, за яким key шукатимемо переведений рядок у довіднику, переданим користувачем у налаштуваннях плагіна.

// plugins/i18n.js
export default {
    install: (app, options) => {
        app.config.globalProperties.$translate = key => {
            return key.split('.').reduce((o, i) => {
                if (o) return o[i]
            }, options)
        }
    }
}

Плагіни також дозволяють використовувати injectдля надання функції або атрибуту користувача плагіна. Наприклад, можна дозволити у програмі отримувати доступ до параметра options, щоб була можливість використовувати об'єкт із текстами перекладів.

// plugins/i18n.js
export default {
    install: (app, options) => {
        app.config.globalProperties.$translate = key => {
            return key.split('.').reduce((o, i) => {
                if (o) return o[i]
            }, options)
        }
        app.provide('i18n', options)
    }
}

Після ініціалізації програми Vue за допомогою createApp() підключити плагін можна за допомогою методу use(). Метод use() приймає два параметри. Перший - сам плагін, що встановлюється, в даному випадку i18nPlugin.

// main.ts
import {createApp} from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'

const app = createApp(Root)
const i18nStrings = {
    greetings: {
        hi: 'Привіт'
    }
}

app.use(i18nPlugin, i18nStrings)
app.mount('#app')

// DemoI18n.vue
<template>
    <h1>{{ $translate("greetings.hi") }}</h1>
</template>
<script setup>
    import {inject} from 'vue'

    const map = inject('i18n');
    console.log(map);
</script>

Очевидно, що при використанні плагіна користувачі будуть передавати об'єкт з переведеними ключами в параметрі options. Функція $translate, отримавши рядок з ключем виду greetings.hello, шукатиме переклад для неї в даній конфігурації і повертатиме переведене значення - в даному випадку Привіт.

Директиви користувача

Дотуп до обэкта app дає можливість використовувати інші можливості Vue, такі як визначення власних директив. Розглянемо простий приклад:

// plugins/directives.js
export default {
    install: (app) => {
        app.directive('style', {
            beforeMount(el, binding) {
                Object.keys(binding.value).forEach((key) => {
                    el.style[key] = binding.value[key];
                });
            },
        })
    }
}

Приклад використання:

<template>
    <div v-style="{ color: 'red', fontSize: '20px' }">Hello, world!</div>
</template>

Даний приклад буде трансформувати об'єкт стилів в атрибут style елемента, на якому використовується директива. Більш детальна інформація по створенню диретив доступна в документації Vue.js.

Завдання

  1. Виконати клонуванння та запуск проекту: https://github.com/lisnayk/modern-frameworks/tree/master/lab4-ex
  2. Проаналізувати приклади плагінів та директив.
  3. Створити плагін який додає глапальну властивість що повертає екземпляр классу ServiceProvider з попередньої лабораторної роботи.
  4. Зареєструвати плагін у програмі та використати його створивши тестові компоненти за парадигмою Options API і Composition API
  5. Створити користувацьку директиву (v-tooltip), яка дозволяє додаати tooltip для едемента (У якості прикладу використайте стилістику з https://www.w3schools.com/css/css_tooltip.asp)
  6. Обект конфігурації директиви повинен містити наступні параметри:
    • content - HTML текст, який буде відображено в підказці.
    • html - Булеве значення: дозволити HTML-вміст підказки.
    • delay - Затримка появи/приховування (мс).
    • trigger - Події, які викликають появу підказки, розділені пробілами: 'hover', 'click', 'focus'.
    • show - Булеве значення для ручного відкриття або приховування підказки.
  7. Зареєструвати директиву.
  8. Протестувати роботу директиви з різними варіантами налаштувань.
  9. Розмістити проект у системі контролю версій (github.com, bitbucket.org) з іменем ропозиторію mjsf-mag-lab4.
  10. Відправити посилання на репозиторій у якості звіту з виконаної роботи.

Контрольні питання

  1. Як правильно зареєструвати плагін у Vue 3 додатку?
  2. Який метод використовується для додавання глобальних властивостей у плагін?
  3. Як можна зробити плагін, який приймає параметри конфігурації під час реєстрації?
  4. Як додати функцію або змінну, доступну у всіх компонентах через this, використовуючи плагін?
  5. Як зареєструвати директиву у Vue 3 додатку?
  6. Які основні етапи створення та реєстрації власного Vue 3 плагіна?
  7. Що таке метод app.use() і для чого він потрібен у Vue 3?
  8. Що таке директива користувача у Vue 3?
  9. Які основні хуки життєвого циклу директиви існують у Vue 3 і коли вони викликаються?