Досвідчені розробники знають, що іноді, намагаючись заощадити час і вирішити якісь завдання свого проєкту за допомогою пакета, створеного кимось іншим, можна, в підсумку, витратити більше часу, ніж було зекономлено. Бібліотеки, жорстко регламентують реалізацію деяких механізмів і не дозволяють вирішувати з їх допомогою незвичайні завдання, що виходять за рамки того, що здається правильним їх авторам, змушують нас, буквально відразу ж після їх установки, шкодувати про те, що ми взагалі вирішили їх спробувати.
Хоча зі мною таке траплялося досить часто, у мене, все ж, є невеликий список улюблених бібліотек, які я використовував в безлічі проєктів, і які за довгий час довели свою крайню корисність. Я випробував безліч підходів для вирішення тих завдань, які вирішують ці бібліотеки. На мій вибір вплинула зручність роботи з бібліотекою, різноманітність її можливостей, хороший зовнішній вигляд того, що виходить при її застосуванні. В результаті у мене і з'явився той список, яким я хочу з вами поділитися.
1. Приховання елементів при клікі за межами елемента
Іноді буває так, що потрібно викликати подію, коли користувач клацне мишею за межами якогось елементу. Найчастіше так треба вчинити тоді, коли потрібно, щоб таким чином можна було б закрити список, що випадає або діалогове вікно. Для реалізації такої поведінки існує один пакет, який я використовую практично в кожному застосунку який розробляється мною.
Це - бібліотека vue-clickaway .
Приховування елемента одним помахом за його межами
Використання vue-clickaway
Зазвичай я підключаю цей пакет в main.js, що дозволяє користуватися ним у всьому застосунку. Якщо ж він застосовується лише на одній-двох сторінках, то ви, швидше за все, вирішите імпортувати його лише там, де він потрібен.
При його індивідуальному імпорті пам'ятайте про те, що ви імпортуєте директиву, а не компонент. Тобто, правильно буде вчинити так:
directives: { onClickaway }
Але не так:
components: { onClickaway }
Ось як зробити директиву доступною на глобальному рівні (в main.js):
import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)
Ось як користуватися цією директивою в шаблоні (тут наведено, для простоти, скорочений варіант коду):
<button
v-on-clickaway="closeYearSelect"
class="select_option gray"
@click="toggleYearSelect"
>
<span class="txt">{{ selectedYear }}</span>
<span class="arrow blind">Open</span>
</button>
Уявімо, що у мене є повноцінне поле для вибору елементів, включаючи список елементів <li>(він в коді не показаний). Вищеописана кнопка використовується для виведення списку на екран, а коли я натискаю за межами цього елемента, я тим самим викликаю метод, який закриває список. Це дозволяє сформувати набагато вдаліший UX, ніж коли користувач завжди буде змушений клацати по кнопці закриття, розташованої в кутку елемента. Цей функціонал ми отримуємо, додаючи до опису кнопки наступну конструкцію:
v-on-clickaway="closeMethodName"
Зверніть увагу на те, що vue-clickaway завжди потрібно використовувати з методом, який щось закриває, а не з методом, який відображає і приховує елемент. Я мають на увазі те, що метод, підключений до v-on-clickaway, повинен виглядати приблизно так:
closeMethod() {
this.showSomething = false
}
Але цей метод не повинен бути таким:
toggleMethod() {
this.showSomething = !this.showSomething
}
Якщо використовується щось на зразок методу toggleMethod, то ви, коли будете клацати за межами елемента, будете його відкривати і закривати, незалежно від того, де саме натискаєте. Вам, ймовірно, це ні до чого. Тому просто використовуйте з v-on-clickaway методи, що приховують елементи.
2. Спливаючі повідомлення
Створювати спливаючі повідомлення можна з використанням різних інструментів, але я - великий фанат бібліотеки vue-toastification .
Повідомлення, реалізоване за допомогою vue-toastification
Вона дає в розпорядження розробника масу налаштувань, завдяки яким з її допомогою можна реалізовувати повідомлення, шо відповідають найрізноманітнішим потребам. Можливості цієї бібліотеки по стилізації та анімації повідомлень дозволяють створювати привабливі і зручні рішення, якісніші, ніж можна створити з використанням інших пакетів.
Використання vue-toastification
Бібліотеку vue-toastification можна використовувати різними способами. Подробиці про це шукайте в її документації. Так, її можна застосовувати на рівні компонента, на глобальному рівні, або навіть разом з Vuex , в тому випадку, якщо повідомлення потрібно показувати, грунтуючись на змінах стану програми, або на діях, пов'язаних з сервером.
Ось приклад глобального використання цієї бібліотеки (в main.js):
import Toast from "vue-toastification"
// Стилі повідомлень
import "vue-toastification/dist/index.css"
Vue.use(Toast, {
transition: "Vue-Toastification__bounce",
maxToasts: 3,
newestOnTop: true,
position: "top-right",
timeout: 2000,
closeOnClick: true,
pauseOnFocusLoss: true,
pauseOnHover: false,
draggable: true,
draggablePercent: 0.7,
showCloseButtonOnHover: false,
hideProgressBar: true,
closeButton: "button",
icon: true,
rtl: false,
})
Стилями повідомлень можна керувати окремо, задаючи їх в кожному компоненті, але у вищенаведеному випадку я зробив стилі повідомлень доступними у всьому застосунку, імпортувавши їх в main.js. Після цього я налаштував параметри повідомлень. Це позбавило мене від необхідності писати один і той самий код кожного разу, коли мені потрібно скористатися повідомленням. У бібліотеки vue-toastification є відмінний майданчик для експериментів. На ньому можна побачити результати впливу параметрів на повідомлення і тут же скопіювати в свій код те, що потрібно. Саме так я і вчинив у вищенаведеному прикладі.
Розглянемо пару варіантів використання цієї бібліотеки.
Варіант 1: використання повідомлень в компоненті (в шаблоні)
<button @click="showToast">Show toast</button>
Ось - метод, що викликається при натисканні на кнопку:
methods: {
showToast() {
this.$toast.success("I'm a toast!")
}
}
Варіант 2: вивід повідомлення при виникненні помилки (або при успішному виконанні операції) в Vuex
Ось приклад коду, який демонструє використання this._vm.$toast.error у Vuex при виникненні помилки:
async fetchSomeData({ commit }) {
const resource_uri = `/endpoint/url`
try {
await axios.get(resource_uri).then((response) => {
commit(SET_DATA, response.data)
})
} catch (err) {
this._vm.$toast.error('Error message: ' + err.message)
}
}
Змінити тип повідомлення можна, просто помінявши ім'я методу .error на .success, .info або .warning. А якщо треба - можна і зовсім це прибрати і отримати повідомлення з налаштуваннями, що задаються за замовчуванням.
Спливаючі повідомлення дозволяють розробнику виводити деякі дані, грунтуючись на змінах стану програми, або в тому випадку, коли відбувається непередбачена помилка. Це покращує сприйняття застосунку користувачем. Спливаючі повідомлення дають користувачеві візуально якіснішу індикацію подій, ніж модальні вікна або потворні alert-вікна. Адже при роботі з вікном, щоб його закрити, потрібно зайвий раз клацнути мишею. Користувачі оцінять те, що ви даєте їм візуальні підказки щодо того, що щось йде не так, позбавляючи їх від необхідності безпорадно дивитися на екран, чекаючи якогось події, яка ніколи не відбудеться. Крім того, повідомлення корисні і в справі підтвердження успішності виконання деяких операцій.
3. Робота з таблицями
Таблиці - це дуже важлива частина багатьох веб-застосунків. Якщо вибрати не дуже якісну бібліотеку для роботи з таблицями, це може принести чимало проблем. Я випробував безліч подібних бібліотек і зупинився на vue-good-table .
Приклад використання vue-good-table
Я впевнений в тому, що ця бібліотека здатна вирішити більшість завдань по роботі з таблицями, що виникають у розробника. І її назва, «good-table» ( «хороша таблиця»), це - не просто слова. Це - дійсно хороша бібліотека, яка надає нам набагато більше можливостей, ніж можна було очікувати.
Використання vue-good-table
У наступному прикладі я прив'язую дані :rows до гетера Vuex, з назвою getOrderHistory:
<vue-good-table
class="mx-4"
:columns="columns"
:rows="getOrderHistory"
:search-options="{ enabled: true }"
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 25,
position: 'top',
perPageDropdown: [25, 50, 100],
dropdownAllowAll: false,
setCurrentPage: 2,
nextLabel: 'next',
prevLabel: 'prev',
rowsPerPageLabel: 'Rows per page',
ofLabel: 'of',
pageLabel: 'page', // для режима 'pages'
allLabel: 'All'
}"
>
Ось опис стовпців таблиці в локальних даних ( data()):
columns: [
{
label: 'Order Date',
field: 'orderDtime',
type: 'date',
dateInputFormat: 'yyyy-MM-dd HH:mm:ss',
dateOutputFormat: 'yyyy-MM-dd HH:mm:ss',
tdClass: 'force-text-center resizeFont'
},
{
label: 'Order Number',
field: 'orderGoodsCd',
type: 'text',
tdClass: 'resizeFont'
},
{
label: 'Title',
field: 'orderTitle',
type: 'text',
tdClass: 'resizeFont ellipsis'
},
{
label: 'Price',
field: 'saleAmt',
type: 'number',
formatFn: this.toLocale
},
{
label: 'Edit btn',
field: 'deliveryUpdateYn',
type: 'button',
tdClass: 'force-text-center',
sortable: false
},
]
Тут label- це заголовок стовпця, що виводиться на екрані, а field- це дані, до яких здійснюється прив'язка в гетері Vuex.
У вищенаведеному прикладі я використовую деякі можливості vue-good-table по налаштуванню таблиць. Це, наприклад, установка вхідного і вихідного формату дат (це дозволяє мені брати повний опис дати і часу з сервера і показувати ці відомості користувачам у зручнішому форматі). Я, крім того, використовую тут formatFn для форматування ціни за допомогою особливого методу, який я назвав toLocale. Потім я налаштовую зовнішній вигляд елементів таблиці, прив'язуючи tdClass до класів, які я поставив у моєму локальному тезі <style>. Пакет vue-good-table, насправді, має нескінченні вбудованіможливості з налаштування. Ці можливості дозволяють створювати таблиці, які здатні підійти для дуже широкого спектра варіантів їх застосування.
Створення власних шаблонів
Бібліотека vue-good-table відмінно працює і з шаблонами, створеними програмістами самостійно. Це означає, що в комірці таблиць можна легко впроваджувати кнопки, поля для вибору значень зі списку, або що завгодно інше. Для того щоб це зробити, досить, користуючись директивою v-if, вказати місце, в якому має бути розташоване щось особливе. Ось приклад додавання кнопки в стовпець таблиці.
<template slot="table-row" slot-scope="props"> <span v-if="props.column.field === 'cancelYn' && props.row.cancelYn === 'Y' "> <BaseButton class="button" @click="showModal"> Cancel Order </BaseButton> </span> </template>
У цьому прикладі я описую кнопку, яка відкриває модальне вікно. Вона виводиться в поле cancelYn(в стовпці) в тому випадку, якщо значення відповідного поля даних дорівнює Y.
Для того щоб додати в таблицю ще один власний стовпець, досить просто додати v-else-if після закриваючого тега конструкції, в якій використовувалася директива v-if (в нашому випадку це - тег <span>). Після цього треба описати логіку нового стовпчика. В цілому, можна сказати, що бібліотека vue-good-table здатна допомогти в будь-якій ситуації, яка пов'язана з виведенням таблиць на веб-сторінках.
4. Засіб для вибору дат
А тепер розповім про бібліотеку, призначену для організації вибору дат. Щось подібне зустрічається в величезній кількості реально існуючих застосунків. Бібліотек, що реалізують цей функціонал, існує набагато більше, ніж бібліотек для вирішення інших завдань, про які я тут розповідаю. Я, вирішуючи це завдання, регулярно повертаюся до бібліотеки vue2-datepicker.
Приклад використання бібліотеки vue2-datepicker
Елементи управління для вибору дат, що створюються за допомогою цієї бібліотеки, легко піддаються стилізації. Вона підтримує масу налаштувань, що стосуються вибору дат і діапазонів дат. Бібліотека дозволяє формувати акуратні і зручні елементи інтерфейсу користувача. Вона навіть підтримує локалізацію.
Зверніть увагу на те, що хоча відповідний пакет і називається vue2-datepicker, у вас не повинно виникнути проблем при його використанні в застосунках, заснованих на Vue 3 (те ж саме стосується і інших бібліотек, розглянутих в цьому матеріалі).
Використання vue2-datepicker
Бібліотеку можна імпортувати в компонент або включити в шаблон.
Ось приклад її імпорту в компонент:
import DatePicker from 'vue2-datepicker'; // стилі import 'vue2-datepicker/index.css';
Ось як користуватися нею в шаблоні:
<date-picker v-model="dateRange" value-type="format" range @clear="resetList" @input="searchDate" ></date-picker>
Тут я використовую опцію range, дозволяючи користувачеві вибирати діапазони дат. Тут же я, за допомогою директиви v-model, підключаю дані, введені користувачам, до значення dateRange. Потім dateRange може, наприклад, використовуватися vue-good-table для налаштування виводу даних в таблиці. Я, крім того, використовую тут опції подій - @clear та @input, застосовуючи їх для виклику методів, один з яких скидає таблицю (resetList), а другий відправляє запит на сервер (searchDate). Бібліотека vue2-datepicker пропонує нам набагато більше опцій і подій, ніж я тут описав. Але тим, про що я тут розповів, я користуюся найчастіше.
5. Рейтинги
Системи рейтингів можна знайти, наприклад, на таких сайтах, як Amazon і Rotten Tomatoes. Можливо, подібними системами ви користуєтесь хоч і не в кожному проекті, але я, на кожному сайті, де це потрібно, реалізую цю можливість з використанням бібліотеки vue-star-rating .
Приклад використання бібліотеки vue-star-rating
Може здатися, що щось подібне дуже легко створити самостійно. Але якщо вникнути в деталі, то виявиться, що розробка такого елемента управління може дуже швидко стати набагато складнішою, ніж цього можна було очікувати. Вже згадана бібліотека дозволяє використовувати власні SVG-зображення для налаштування форми фігур, що застосовуються при виставленні оцінок. Вона дозволяє налаштовувати розмір елементів, відстань між ними, їх колір.
Оцінку, яку користувач поставив за допомогою елемента управління з vue-star-rating, можна легко, використовуючи v-model, передати туди, де її планується використовувати. Оцінки можна робити змінними або незмінними, скориставшись єдиним параметром.
А якщо виявиться, що вам при роботі з цією бібліотекою знадобиться більше можливостей - погляньте на пакет vue-rate-it того ж автора.
Використання vue-star-rating
Ось як користуватися цією бібліотекою в шаблоні (з опціями):
<star-rating class="star-rating" :rating="newReivew.score" active-color="#FBE116" :star-size="starSize" :increment="increment" :show-rating="showRating" @rating-selected="setRating" />
Ось як імпортувати її в компонент:
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
},
}
Підсумки
Ми розглянули 5 бібліотек для Vue. Сподіваємося, ви знайшли тут щось таке, що стане вам у нагоді при розробці ваших проектів.
Джерело ENG: medium.com
Ще немає коментарів