#fancybox #gallery #vuejs3 #lightbox
Вопрос:
Я провел серьезный поиск в Интернете, чтобы найти плагин всплывающей галереи для Vue 3, который поддерживает как изображения, так и видеофайлы. Большинство плагинов написано для Vue 2.
Кто — нибудь может порекомендовать хороший плагин? (что-то вроде fancybox/лайтбокса)
Комментарии:
1. Последняя версия Fancybox написана на обычном JS, в настоящее время официальной оболочки для Vue нет, но, возможно, вы могли бы создать ее на основе образца для React — fancyapps.com/docs/ui/fancybox/react
Ответ №1:
Мне удалось решить эту проблему с помощью fancyapps. Поскольку он написан на ванильном JS, я мог бы легко включить его в свой файл Vue. Единственное отличие в том, что вам не нужно регистрировать его как компонент. P.S. Чтобы использовать fancyapps при загрузке страницы, вам нужно будет добавить код для инициализации в activated() крюк жизненного цикла.
FancyboxItem.vue
Сначала импортируйте fancybox:
import {Fancybox} from "/@fancyapps/ui/src/Fancybox/Fancybox";
Кроме того, требуется css:
<style lang="scss" scoped>
@import "@fancyapps/ui/dist/fancybox.css";
</style>
Затем в моем шаблоне я добавил кнопку с событием щелчка.
<template>
<button id="play-button" @click="startFancy()"></button>
</template>
И в методах я создал функцию, которая запускает fancybox:
methods: {
startFancy: {
var gallery = this.imgs; //your object with images
Fancybox.show(gallery, {}); //starts fancybox with the gallery object
}
}