具有 Vue 3 视频支持的弹出式画廊插件？

Question

我进行了一些认真的互联网搜索，以找到支持图像和视频文件的 Vue 3 的弹出式画廊插件。大多数插件都是为 Vue 2 编写的。

谁能推荐一个好的插件？（类似于 fancybox/lightbox）

Answer 1

我已经用 fancyapps 解决了这个问题。因为它是用 vanilla 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
  }
}

具有 Vue 3 视频支持的弹出式画廊插件？

Popup gallery plugin with video support for Vue 3?

gallery

lightbox

fancybox

vuejs3