Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим, как отслеживать видимость элементов и выполнять перетаскивание с помощью сторонних пакетов.
vue-наблюдение-видимость
Пакет vue-observe-visibility позволяет нам следить за статусом видимости любого заданного HTML-элемента в шаблоне нашего компонента.
Он использует API-интерфейс Intersection Observer для отслеживания видимости элементов.
Мы можем установить его следующим образом:
npm install --save vue-observe-visibilityКроме того, мы можем добавить его как скрипт в наш HTML-код следующим образом:
<script src="https://unpkg.com/vue-observe-visibility/dist/vue-observe-visibility.min.js"></script>
Тогда мы можем использовать его следующим образом:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueObserveVisibility from "vue-observe-visibility";
Vue.use(VueObserveVisibility);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<div v-for="n in 100" :key="n" v-observe-visibility="visibilityChanged">{{n}}</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
visibilityChanged(isVisible, entry) {
console.log(
`${entry.target.innerText} is ${isVisible ? "visible" : "invisible"}`
);
}
}
};
</script>
В приведенном выше коде мы зарегистрировали пакет VueObserveVisibility в main.js, чтобы мы могли использовать его во всем приложении.
Затем у нас есть App.vue, в котором есть список div, в каждом из которых отображается число.
В каждом div мы используем директиву v-observe-visibility с методом visibilityChanged в свойстве methods для регистрации видимости каждого элемента.
Объект entry - это объект события, у которого есть свойство target с отслеживаемым элементом.
Свойство invisible - это логическое значение, которое указывает, является ли данный элемент видимым или нет.
Теперь, когда мы прокручиваем страницу вверх и вниз, мы видим что-то вроде:
... 31 is invisible 59 is visible 30 is invisible ...
из вывода журнала консоли по мере прокрутки.
Мы также можем добавить параметр once к объекту, который мы передаем как значение директивы v-observe-visibility, следующим образом:
<div v-observe-visibility="{
callback: visibilityChanged,
once: true,
}">
...
</div>
Таким образом, мы наблюдаем за видимостью элементов внутри только при первой загрузке элементов.
Кроме того, мы можем добавить параметр throttle, чтобы обратный вызов не вызывался слишком часто. Например, мы можем написать:
<div v-observe-visibility="{
callback: visibilityChanged,
throttle: 300,
}">
...
</div>
Приведенный выше код задержит вызов visibilityChanged callback buy на 300 мс.
Мы можем регулировать параметры, добавляя свойство throttleOptions, которое принимает параметр leading для запуска обратного вызова в первый раз, когда видимость изменяется, не дожидаясь задержки газа.
Это может быть visible, hidden или both.
Кроме того, мы можем отключить наблюдателя на элементе, передав ложное значение следующим образом:
<div v-for="n in 100" :key="n" v-observe-visibility="n === 100 ? visibilityChanged : false" > //... </div>
В приведенном выше коде будет наблюдаться изменение видимости только последнего элемента.
v-перетащили
Директива v-dragged позволяет с легкостью обрабатывать перетаскивание элементов.
Для его установки запускаем:
npm install --save v-dragged
Тогда мы можем использовать его следующим образом:
main.js
import Vue from "vue";
import App from "./App.vue";
import VDragged from "v-dragged";
Vue.use(VDragged);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<div v-dragged="onDragged" id="drag">drag me</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
onDragged({
el,
deltaX,
deltaY,
offsetX,
offsetY,
clientX,
clientY,
first,
last
}) {
if (first) {
return;
}
if (last) {
return;
}
const l = +window.getComputedStyle(el)["left"].slice(0, -2) || 0;
const t = +window.getComputedStyle(el)["top"].slice(0, -2) || 0;
el.style.left = `${l + deltaX}px`;
el.style.top = `${t + deltaY}px`;
}
}
};
</script>
<style>
#drag {
position: absolute;
}
</style>
В приведенном выше коде у нас есть div с текстом «перетащите меня» внутрь. Мы привязываем его к директиве v-dragged со значением, установленным для метода onDragged.
В методе onDragged мы можем получить новые координаты левого и верхнего края, используя метод window.getComputedStyle с объектом элемента el, который имеет перетаскиваемый элемент.
Затем мы можем использовать эти новые значения для установки новых стилей левого и верхнего, как мы это делали ниже:
el.style.left = `${l + deltaX}px`;
el.style.top = `${t + deltaY}px`;
Мы добавили дельты к исходным левым и верхним значениям, чтобы обновить положение.
Кроме того, мы устанавливаем стиль перетаскиваемого элемента position: absolute;, чтобы мы могли свободно перемещать его по странице.
Заключение
Пакет vue-observe-visibility позволяет нам следить за видимостью элементов на экране. Обратный вызов, который вызывается при обновлении видимости, можно регулировать.
Пакет v-dragged полезен для обработки событий перетаскивания. Мы можем использовать его для обновления положения перетаскиваемых элементов данными, предоставленными директивой.
Примечание команды разработчиков Plain English
Вы знали, что у нас четыре публикации? Проявите немного любви, предложив им следующие слова: JavaScript на простом английском, AI на простом английском, UX на простом английском , Python на простом английском - спасибо и продолжайте учиться!
Мы также запустили YouTube и хотели бы, чтобы вы поддержали нас, подписавшись на наш канал Plain English.
И, как всегда, Plain English помогает продвигать хороший контент. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте электронное письмо по адресу [email protected] с вашим именем пользователя Medium и тем, о чем вы хотите написать, и мы вернуться к вам!
