Надихнувшись AngularJS, Vue пропонує власні вбудовані директиви (на зразок v-html
чи v-once
), які обов'язково стануть у пригоді при розробці. З повним переліком вбудованих директив можна ознайомитись за посиланням.
Ба більше, ви можете створити власні директиви. Спільнота Vue.js вже змогла розв'язати безліч проблем з користувацькими директивами. Можливо деякі зі створених пакетів допоможуть і вам.
Тож розглянемо 15 користувацьких директив Vue.js, які можуть значно зекономити ваш час.
1. V-Hotkey
Репозиторій: v-hotkey
Демонстрація:за посиланням
Встановлення: npm install --save v-hotkey
Директива дозволяє прив'язувати сполучення гарячих клавіш до компонентів. Хочете сховати компонент, натиснувши Escape
, а повернути, натиснувши Ctrl+Enter
? Легко!
<template>
<div
v-show="show"
v-hotkey="{
'esc': onClose,
'ctrl+enter': onShow
}"
>
Натисніть `esc`, аби закрити мене!
</div>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
onClose() {
this.show = false
},
onShow() {
this.show = true
},
}
}
</script>
2. V-Click-Outside
Репозиторій: v-click-outside
Демонстрація:за посиланням
Встановлення: npm install --save v-click-outside
Часто потрібно реалізовувати логіку, коли клік за межами компоненту його закриває. З директивою V-Click-Outside
це робиться в одну мить. Особливо корисно при роботі зі спливними вікнами та випадним меню.
<template>
<div
v-show="show"
v-click-outside="onClickOutside"
>
Сховайте мене при кліці поза елементом
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
methods: {
onClickOutside() {
this.show = false;
}
}
};
</script>
Зверніть увагу: ви також можете запускати таку поведінку при подвійному кліці. Більше деталей — в документації.
3. V-Clipboard
Репозиторій: v-clipboard
Встановлення: npm install --save v-clipboard
Цю просту директиву ви можете додати до будь-якого статичного чи динамічного елемента вашого коду. Під час кліку на нього, значення, передане в директиву, буде скопійовано в буфер обміну користувача.
<button v-clipboard="value">
Copy to clipboard
</button>
4. Vue-ScrollTo
Репозиторій: vue-scrollto
Демонстрація:за посиланням
Встановлення: npm install --save vue-scrollto
Директива буде очікувати подію кліка на елементі та скролити до заданого ідентифікатора. Основне застосування — робота зі змістом або заголовками навігації.
<span v-scroll-to="{
el: '#element', // Елемент, до якого ви хочете скролити
container: '#container', // Контейнер з прокруткою
duration: 500, // Тривалість (в мілісекундах) анімації прокрутки
easing: 'linear' // Затухання анімації
}"
>
Скролимо до #element, клікнувши тут
</span>
Зверніть увагу: щоб використовувати директиву програмно, зверніться до документації.
5. Vue-Lazyload
Репозиторій: vue-lazyload
Демонстрація:за посиланням
Встановлення: npm install --save vue-lazyload
Якщо ви хочете за 5 хвилин реалізувати відкладене завантаження зображень для пришвидшення сторінок, то ця директива стане вам у пригоді.
<img v-lazy="https://www.domain.com/image.jpg">
6. V-Tooltip
Репозиторій: v-tooltip
Демонстрація:за посиланням
Встановлення: npm install --save v-tooltip
Підказки будуть корисною фічею майже в кожному проєкті. З директивою V-Tooltip
ви можете додати реактивні підказки до ваших елементів, контролювати їх позицію, викликати їх кліком чи наведенням на елемент.
<button v-tooltip="'You have ' + count + ' new messages.'">
Зверніть увагу: існує ще один популярний пакет для підказок — vue-directive-tooltip.
7. V-Scroll-Lock
Репозиторій: v-scroll-lock
Демонстрація:за посиланням
Встановлення: npm install --save v-scroll-lock
Директива базується на пакеті body-scroll-lock і зупиняє прокрутку body, коли відкрите модальне вікно.
<template>
<div class="modal" v-if="opened">
<button @click="onCloseModal">X</button>
<div class="modal-content" v-scroll-lock="opened">
<p>Багато контенту, який прокручується</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
opened: false
}
},
methods: {
onOpenModal () {
this.opened = true
},
onCloseModal () {
this.opened = false
}
}
}
</script>
8. V-Money
Репозиторій: v-money
Демонстрація:за посиланням
Встановлення: npm install --save v-money
Коли вам треба додати позначку валюти перед чи після input
, зверніться до цієї директиви. Ви просто визначаєте кількість десяткових знаків чи розділювач — і директива робить все за вас в один рядок.
<template>
<div>
<input v-model.lazy="price" v-money="money" /> {{price}}
</div>
</template>
<script>
export default {
data () {
return {
price: 123.45,
money: {
decimal: ',',
thousands: '.',
prefix: '$ ',
precision: 2,
}
}
}
}
</script>
9. Vue-Infinite-Scroll
Репозиторій: vue-infinite-scroll
Встановлення: npm install --save vue-infinite-scroll
Ця директива корисна, якщо ви хочете підвантажувати нові елементи, коли користувач прокручує до кінця сторінки. Коротко кажучи, коли кінець елемента досягне кінцевої точки області видимості, викличеться метод bound
.
<template>
<!-- ... -->
<div
v-infinite-scroll="onLoadMore"
infinite-scroll-disabled="busy"
infinite-scroll-distance="10"
></div>
<template>
<script>
export default {
data() {
return {
data [],
busy: false,
count: 0
}
},
methods: {
onLoadMore() {
this.busy = true;
setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
this.data.push({ name: this.count++ });
}
this.busy = false;
}, 1000);
}
}
}
</script>
10. Vue-Clampy
Репозиторій: vue-clampy
Встановлення: npm install --save @clampy-js/vue-clampy
Директива дозволяє обрізати контент всередині елемента та додати крапки наприкінці. Під капотом використовується clampy.js.
<p v-clampy="3">Long text to clamp here</p>
<!-- виведе: Long text to...-->
11. Vue-InputMask
Репозиторій: vue-inputmask
Встановлення: npm install --save vue-inputmask
Коли вам треба відформатувати дату в особливий спосіб для полів вводу, то директива (базується на бібліотеці inputmark) дозволяє вказати потрібний шаблон.
<input type="text" v-mask="'99/99/9999'" />
12. Vue-Ripple-Directive
Репозиторій: vue-ripple-directive
Встановлення: npm install --save vue-ripple-directive
З цією директивою ви можете додати ефект пульсації під час кліку на елемент. Дуже зручно для кнопок, що обробляють певні дії.
<div v-ripple class="button is-primary">This is a button</div>
13. Vue-Focus
Репозиторій: vue-focus
Встановлення: npm install --save vue-focus
Іноді необхідно зробити фокус для input
, коли користувач взаємодіє з ним.
<template>
<button @click="focused = true">Фокус для input</button>
<input type="text" v-focus="focused">
</template>
<script>
export default {
data: function() {
return {
focused: false,
};
},
};
</script>
14. V-Blur
Репозиторій: v-blur
Демонстрація:за посиланням
Встановлення: npm install --save v-blur
Припустимо, є певна частина вашого застосунку, якій ви хочете додати ефект розмиття, якщо користувач не зареєстрований. З директивою V-Blur
ви за мить налаштуєте прозорість, фільтр розмиття та перехід між двома станами.
<template>
<button
@click="blurConfig.isBlurred = !blurConfig.isBlurred"
>Перемикаємо видимість контенту</button>
<p v-blur="blurConfig">Розмитий контент</p>
</template>
<script>
export default {
data () {
return
blurConfig: {
isBlurred: false,
opacity: 0.3,
filter: 'blur(1.2px)',
transition: 'all .3s linear'
}
}
}
}
};
</script>
15. Vue-Dummy
Репозиторій: vue-dummy
Демонстрація:за посиланням
Встановлення: npm install --save vue-dummy
На початкових етапах роботи вам потрібен текст lorem ipsum
чи тимчасові зображення певного розміру. Vue-Dummy
підбере весь контент за вас.
<template>
<!-- наступний блок міститиме 150 слів -->
<p v-dummy="150"></p>
<!-- Розміщуємо зображення розміром 400x300-->
<img v-dummy="'400x300'" />
</template>
Ще немає коментарів