Какво представляват директивите? Защо са полезни?
Персонализираните директиви са начин да направим нашия код многократно използваем, подобно на mixins, но вместо да използваме повторно функционалностите на компонентите, директивите ни позволяват да създаваме единични методи, които могат да се използват многократно, тези персонализирани директиви са чудесни за достъп/манипулиране на DOM. Vue идва с няколко директиви по подразбиране, които гарантирано сте виждали/използвали преди като v-model, v-bind & v-show. Много по-лесно е да разберем, след като видим някои примери за това какво можем да правим с персонализирани директиви.
Vue също ви позволява да регистрирате свои собствени персонализирани директиви, къде персонализираните директиви все още биха били полезни? Пример би бил фокусирането върху входен елемент, когато страницата се зареди.
Какво ще правим?
Ще направим директива, която ще накара елементите да се превъртат навътре и да избледняват, след като се видят.
Тази анимация е много фина, но може да помогне да направите скучната статична уеб страница по-ангажираща и интересна за разглеждане.
Ако не се интересувате от създаването на тази анимация и просто искате да разберете как да добавяте директиви към вашия проект, можете просто да прочетете тези раздели:
- Създаване на директивния файл
- Направете директивата достъпна във вашия проект
Създаване на директива
Ако някога сте правили директива във Vue преди, това ще изглежда много подобно на това, но начинът, по който прилагаме това в нашето приложение, е малко по-различен.
Преди да започнеш
Първо, трябва да навигираме до нашата папка с плъгини, която обикновено се намира в основната директория на нашите приложения (~/plugins), ако нямате тази папка, можете просто да я създадете.
Създаване на директивния файл
Във вашата папка с плъгини създайте файл и го наречете както искате, аз нарекох моя animateOnScroll. Разширението на вашия файл може да бъде просто .js или .client.js, ако възнамерявате да разположите сайта си статично, и двете от тези разширения ще работят добре, но ако използвате SSR на вашия сайт, след като разположите .js няма да работи, трябва да използвате .client.js. Склонен съм винаги да използвам .client.js само за да избегна тази грешка в бъдеще, ако реша да премина към изобразяване от страна на сървъра.
Създаване на наблюдателя на кръстовището
Вътре във вашия animateOnScroll.client.js нека създадем наблюдателя, който ще наблюдава елементите и ще проверява дали се виждат.
const animateOnScrollObserver = new IntersectionObserver()
Сега, след като създадохме наблюдател, нека го накараме да слуша за пресичащ се запис (в изглед), след което да добавим клас, за да го анимираме в изглед, ние също ще искаме да ненаблюдаваме елемента, след като влезе в изглед, защото наблюдателят на пресичане е направил всичко искахме да се направи за този елемент, така че няма смисъл да продължаваме да наблюдаваме.
Първоначално това може да изглежда малко смущаващо, ако никога преди не сте работили с наблюдатели, но това, което се случва, е доста просто и лесно за четене.
Може би сте разбрали, че добавяме клас, който все още не сме създали, не се притеснявайте, че ще го създадем по-късно.
Създаване на директивата
Преди да започнем да създаваме нашата директива, трябва да импортираме Vue в нашия animateOnScroll.client.js файл.
import Vue from 'vue'
Сега най-накрая можем да създадем нашата директива, като използваме Vue.directive() директивната функция приема два параметъра име на директива (тип низ) и опции/дефиниция на директива, това е обект, който съдържа „функции за кука“.
Към момента има около пет функции на кука, но за този проект ще използваме само една от тях, куката за свързване.
Куката за свързване се извиква само веднъж, когато директивата за първи път е обвързана с елемента. Това е мястото, където можете да направите еднократна настройка.
Това, което се случва тук е, че след като куката bind бъде извикана, тя извиква нашата анонимна функция, която има el параметър, това е препратка към целевия елемент (елементът, към който е обвързана директивата) и добавяне на клас .before-enter, след което наблюдава нашия целеви елемент .
Сега вътрешността на файла animateOnScroll.client.js трябва да изглежда нещо подобно:
CSS анимация
За тази анимация всичко, което ще направим, е да създадем двата класа .enter и .before-enter това са класовете, които добавяме към нашите елементи преди и след като елементът се вижда. Можете да промените тези стилове, за да създадете/промените тази анимация.
Направете директивата достъпна във вашия проект
Отидете до вашия nuxt.config.js файл и намерете масива с плъгини, ако не можете да намерите това, можете да го добавите във файла по подразбиране, това ще бъде генерирано, защото сте създали своя проект. Всичко, което остава да направите, е да добавите пътя към масива.
plugins: [ '~/plugins/animateOnScroll.client.js' ]
Вече можете да използвате v-animate-on-scroll на всеки елемент/компонент навсякъде във вашия проект по следния начин:
<UserCard v-animate-on-scroll />
Всички дефинирани от вас директиви ще имат префикс v- в началото на името на директивата.
Повече за създаването на директиви във Vue
Връзки към документация и ресурси
- Връзка къмNuxt.org
- Връзка към документи: Свойство на приставки | Потребителски директиви | Рендиране на собственост
