vue-gallery

Vue-Gallery是一个Vue.js的图片和视频预览组件。它允许您在网页上展示一组图片或视频，并提供交互式的预览功能。

该组件的使用示例如下所示：

<template>
  <div>
    <gallery :images="images" :index="index" @close="index = null"></gallery>
    <div class="image" v-for="(image, imageIndex) in images" :key="imageIndex" @click="index = imageIndex" :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"></div>
  </div>
</template>

<script>
import VueGallery from 'vue-gallery';
export default {
  data: function () {
    return {
      images: [
        'https://dummyimage.com/800/ffffff/000000',
        'https://dummyimage.com/1600/ffffff/000000',
        'https://dummyimage.com/1280/000000/ffffff',
        'https://dummyimage.com/400/000000/ffffff',
      ],
      index: null
    };
  },
  components: {
    'gallery': VueGallery
  },
}
</script>

<style scoped>
.image {
  float: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #ebebeb;
  margin: 5px;
}
</style>

此外，如果您使用的是Nuxt.js，您需要将一个名为`vue-gallery.client.js`的新文件添加到您的Nuxt插件文件夹中，并且文件名必须以`.client.js`结尾（仅适用于Nuxt v.2.4.0）。文件的内容如下：

import Vue from 'vue'
import VueGallery from 'vue-gallery'

Vue.component('gallery', VueGallery)

需要注意的是，当前的Vue-Gallery官方示例仅提供了图片预览功能，并没有视频预览的示例。如果您希望在Vue-Gallery中同时预览图片和视频，您需要对组件进行一些自定义的修改。
<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>