У динамічному світі веб-розробки створення зручних для користувача форм є ключовим для покращення взаємодії та досвіду користувачів. Сьогодні ми розглянемо створення універсального компонента списку вибору (select list) з використанням Composition API у Vue 3 та TypeScript для забезпечення типізації. Цей компонент не тільки спрощує процес роботи з вибором у випадаючих списках, але й дає змогу розробникам зручно керувати реактивністю стану. Давайте розглянемо, як побудувати цей компонент, зосередившись на його гнучкості в обробці як рядкових, так і об'єктних опцій, випромінюванні (emit) кастомних подій та інтеграції з бібліотеками валідації, такими як Vuelidate.
Розпочнемо з огляду нашого компонента нижче і розберемо, що відбувається в кожному сегменті.
Ми починаємо з того, що вказуємо нашому блокові скрипта, що це Single File Component (SFC), використовуючи ключове слово setup, і вказуємо, що ми використовуємо TypeScript за допомогою lang="ts". Така конфігурація дозволяє нам безпосередньо використовувати Composition API у Vue в шаблоні.
Ми імпортуємо ValidationArgs з @vuelidate/core для обробки валідації форми, а також підключаємо наш локальний компонент Validation.vue.
Я створив цей простий, але гнучкий інтерфейс Option. Він розроблений для роботи як з рядковими опціями, так і з об'єктами, що мають властивості value та label. Таким чином, ми можемо легко розширити його для інших типів, таких як boolean або number, якщо це буде потрібно в майбутньому.
Перейдемо до props. Тут є багато можливостей, але я зберігав простоту:
- modelValue — це значення, яке оновлюється в нашому Pinia store або будь-якій іншій реактивній системі для керування станом. Воно добре працює з v-model у Vue для двостороннього зв'язування даних.
- options — це список опцій для випадаючого списку; він може бути масивом рядків або об'єктів типу Option, що дає гнучкість у структурі даних.
- placeholder — текст, що відображається перед вибором будь-якої опції; за замовчуванням він залишений невизначеним.
- id — для ідентифікації нашого елементу, що зручно для тестування та стилізації, також є необов'язковим.
- validation — сюди передаються правила валідації Vuelidate для форми, знову ж таки, це необов'язково.
Коли я думав, які події потрібно передавати назад батьківському компоненту (який, ймовірно, містить нашу форму), я зрозумів, що на даний момент нам потрібне лише базове оновлення моделі.
Щоб шаблон залишався чистим, я створив два базових гетери:
getOptionValue та getOptionLabel — ці методи відповідають за отримання правильного значення або мітки для кожного елементу списку, незалежно від того, чи це рядок, чи об'єкт.
Нарешті, handleValueChange — це місце, де ми ловимо будь-які зміни у вибраному значенні нашого select елементу.
У динамічному світі веб-розробки створення зручних для користувача форм є надзвичайно важливим для покращення взаємодії та досвіду користувачів. Сьогодні ми розглянемо створення універсального компонента списку вибору за допомогою Composition API у Vue 3 та TypeScript для забезпечення типізації. Цей компонент не лише спрощує обробку вибору з випадаючого списку, але й дає змогу розробникам легко керувати реактивністю стану. Давайте розглянемо, як створити цей компонент, зосередившись на його гнучкості в обробці як рядкових, так і об'єктних опцій, випромінюванні (emit) кастомних подій та інтеграції з бібліотеками валідації, такими як Vuelidate.
Розпочнемо з огляду нашого компонента нижче та розберемо, що відбувається в кожному сегменті.
Ми починаємо з того, що вказуємо нашому блоку скрипта, що це Single File Component (SFC), використовуючи ключове слово setup, і вказуємо, що використовуємо TypeScript за допомогою lang="ts". Така конфігурація дозволяє нам безпосередньо використовувати Composition API у Vue в шаблоні.
Ми імпортуємо ValidationArgs з @vuelidate/core для обробки валідації форми, а також підключаємо наш локальний компонент Validation.vue.
Я створив цей простий, але гнучкий інтерфейс Option. Він розроблений для роботи як з рядковими опціями, так і з об'єктами, що мають властивості value та label. Таким чином, ми можемо легко розширити його для інших типів, таких як boolean або number, якщо це буде потрібно в майбутньому.
Перейдемо до props. Тут є багато можливостей, але я зберігав простоту:
- modelValue — це значення, яке оновлюється в нашому Pinia store або будь-якій іншій реактивній системі для керування станом. Воно добре працює з v-model у Vue для двостороннього зв'язування даних.
- options — це список опцій для випадаючого списку; він може бути масивом рядків або об'єктів типу Option, що дає гнучкість у структурі даних.
- placeholder — текст, що відображається перед вибором будь-якої опції; за замовчуванням він залишений невизначеним.
- id — для ідентифікації нашого елементу, що зручно для тестування та стилізації, також є необов'язковим.
- validation — сюди передаються правила валідації Vuelidate для форми, знову ж таки, це необов'язково.
Коли я думав, які події потрібно передавати назад батьківському компоненту (який, ймовірно, містить нашу форму), я зрозумів, що на даний момент нам потрібне лише базове оновлення моделі.
Щоб шаблон залишався чистим, я створив два базових гетери:
getOptionValue та getOptionLabel — ці методи відповідають за отримання правильного значення або мітки для кожного елементу списку, незалежно від того, чи це рядок, чи об'єкт.
Нарешті, handleValueChange — це місце, де ми ловимо будь-які зміни у вибраному значенні нашого select елементу.
Цей метод гарантує, що коли користувач вибирає іншу опцію, ми генеруємо подію для оновлення modelValue в батьківському компоненті, зберігаючи синхронізацію всього.
Давайте розглянемо наш шаблон. Ми працюємо з базовим елементом
Ви побачите опцію placeholder, якщо вона визначена — вона буде вимкнена, вибрана і прихована, щоб підказати користувачу, але не бути доступною для вибору. Опції додаються динамічно за допомогою v-for, де ключ кожної опції унікально встановлюється за допомогою getOptionLabel(option), а її значення — getOptionValue(option).
Порада: часто рекомендується тримати кількість опцій у випадаючому списку між 5 і 8 для оптимального користувацького досвіду. Якщо їх більше, подумайте про додавання можливості пошуку або групування опцій. Ось ще кілька способів покращити досвід користувача з випадаючими списками:
Нарешті, ми інтегруємо наш компонент Validation для надання негайного зворотного зв'язку. Цей компонент перевіряє modelValue на відповідність правилам валідації і показує помилки, якщо, наприклад, поле залишене порожнім. Така конфігурація також враховує зручність використання на мобільних пристроях для кращих сенсорних взаємодій та включає ARIA мітки для покращення доступності.
Це так просто у використанні, що ми можемо розмістити цей компонент будь-де в вашому додатку!
На практиці, ось як ми використовуємо наш компонент у батьківському компоненті. Ми, по суті, говоримо:
«Привіт, CustomSelect, ось твої дані для роботи (v-model, options), ось як ти маєш виглядати (placeholder, id) і ось як ти маєш поводитись (validation). Іди роби свою справу, і тримай батьківський компонент в курсі та під контролем!»
Ця конфігурація дозволяє нашому батьківському компоненту керувати станом випадаючого списку (через store.customSelect), передавати опції, забезпечити підказки для користувача та встановити деякі правила перед тим, як вибір буде визнаний правильним. Це чистий, модульний спосіб обробки складних елементів форм за допомогою Vue.js, що дозволяє підтримувати логіку батьківського компонента чистою і зосередженою на загальному потоці додатку.
І ось так виглядає список вибору у нашій формі, склонуйте репозиторій нижче, щоб побачити, як він був інтегрований у форму для огляду кави!
[
GitHub - DanielPaulWilkinson/vue-component-libary
Contribute to DanielPaulWilkinson/vue-component-libary development by creating an account on GitHub.
github.com
](https://github.com/DanielPaulWilkinson/vue-component-libary?source=post_page-----c2b3787c6e11--------------------------------)
Цей метод гарантує, що коли користувач вибирає іншу опцію, ми генеруємо подію для оновлення modelValue в батьківському компоненті, зберігаючи синхронізацію всього.
Давайте розглянемо наш шаблон. Ми працюємо з базовим елементом
Ви побачите опцію placeholder, якщо вона визначена — вона буде вимкнена, вибрана і прихована, щоб підказати користувачу, але не бути доступною для вибору. Опції додаються динамічно за допомогою v-for, де ключ кожної опції унікально встановлюється за допомогою getOptionLabel(option), а її значення — getOptionValue(option).
Порада: часто рекомендується тримати кількість опцій у випадаючому списку між 5 і 8 для оптимального користувацького досвіду. Якщо їх більше, подумайте про додавання можливості пошуку або групування опцій. Ось ще кілька способів покращити досвід користувача з випадаючими списками:
Нарешті, ми інтегруємо наш компонент Validation для надання негайного зворотного зв'язку. Цей компонент перевіряє modelValue на відповідність правилам валідації і показує помилки, якщо, наприклад, поле залишене порожнім. Така конфігурація також враховує зручність використання на мобільних пристроях для кращих сенсорних взаємодій та включає ARIA мітки для покращення доступності.
Це так просто у використанні, що ми можемо розмістити цей компонент будь-де в вашому додатку!
На практиці, ось як ми використовуємо наш компонент у батьківському компоненті. Ми, по суті, говоримо:
«Привіт, CustomSelect, ось твої дані для роботи (v-model, options), ось як ти маєш виглядати (placeholder, id) і ось як ти маєш поводитись (validation). Іди роби свою справу, і тримай батьківський компонент в курсі та під контролем!»
Ця конфігурація дозволяє нашому батьківському компоненту керувати станом випадаючого списку (через store.customSelect), передавати опції, забезпечити підказки для користувача та встановити деякі правила перед тим, як вибір буде визнаний правильним. Це чистий, модульний спосіб обробки складних елементів форм за допомогою Vue.js, що дозволяє підтримувати логіку батьківського компонента чистою і зосередженою на загальному потоці додатку.
І ось так виглядає список вибору у нашій формі, склонуйте репозиторій нижче, щоб побачити, як він був інтегрований у форму для огляду кави!
[
GitHub - DanielPaulWilkinson/vue-component-libary
Contribute to DanielPaulWilkinson/vue-component-libary development by creating an account on GitHub.
github.com
](https://github.com/DanielPaulWilkinson/vue-component-libary?source=post_page-----c2b3787c6e11--------------------------------)
Перекладено з: Crafting a Dynamic Select List Component in Vue 3 with Composition API and TypeScript