Скроллинг к компоненту в Vue.js
Date and time: Aug. 10, 2018, 3:49 p.m. | Category: Vue.js
В этой статье мы рассмотрим простейший способ прокрутки к HTML элементу с помощью JavaScript, оформленный в виде Vue.js компонента.
Для решения задачи мы воспользуемся относительно новым экспериментальным API, а именно методом Element.scrollIntoView(). Несмотря на то, что API экспериментальный, самая базовая его поддержка есть даже в IE8 (список поддерживаемых браузеров).
Создадим новый Single File Component в файле ScrollToComponent.vue:
<template>
</template>
<script>
export default {
name: 'scroll-to-component',
};
</script>
По задумке автора, этот компонент должен оборачивать любой участок кода и позволять по какому-либо событию прокрутить страницу к этому участку. Чтобы иметь возможность помещать HTML внутри компонента, добавим элемент slot внутри его шаблона:
<template>
<slot/>
</template>
Теперь необходимо каким-то образом вывать ранее упомянутый метод Element.scrollIntoView() на содержимом компонента. Так как slot не является HTML элементом, требуется поместить его в какой-либо HTML элемент, например, span. Для нового элемента создадим ссылку (ref="component"), чтобы можно было к нему обраться в методе компонента scrollTo():
<template>
<span ref="component">
<slot/>
</span>
</template>
<script>
export default {
name: 'scroll-to-component',
methods: {
scrollTo () {
this.$refs.component.scrollIntoView();
},
},
};
</script>
На данном этапе мы получили самую базовую версию компонента. Он уже будет выполнять свою основную функцию, но его можно улучшить путём добавление возможности передачи параметров скроллинга (подробности о которых можно узнать по ссылке в начале статьи) через свойста компонента:
<template>
<span ref="component">
<slot/>
</span>
</template>
<script>
export default {
name: 'scroll-to-component',
props: {
alignToTop: {
required: false,
default: null,
type: Boolean,
},
options: {
required: false,
default: null,
type: Object,
},
},
methods: {
scrollTo () {
this.$refs.component.scrollIntoView(this.options !== null ? this.options : this.alignToTop);
},
},
};
</script>
Данный компонент внутри какого-то другого можно использовать следующим образом:
<template>
<div>
<button @click="scroll">Scroll to Element</button>
<div style="height: 2000px;"/>
<scroll-to-component ref="element">
<h1>Element</h1>
</scroll-to-component>
</div>
</template>
<script>
import ScrollToComponent from "ScrollToComponent.vue";
export default {
name: 'another-component',
components: {
ScrollToComponent,
},
methods: {
scroll () {
this.$refs.element.scrollTo();
},
},
};
</script>
comments powered by Disqus