如何使用vue-image-lightbox实现页面图片画廊灯箱展示功能

解决方法 #

你需要给预览图绑定点击事件，手动调用vue-image-lightbox提供的openImage方法唤起灯箱，具体修改如下：

核心修改点

• 移除a标签的无效href属性，添加点击事件同时阻止默认跳转行为，传入对应图片的索引值
• 新增打开灯箱的方法，通过ref调用lightbox组件的openImage方法，传入要打开的图片索引即可定位到对应资源
• 预览图的src绑定为media数组中对应的资源地址，正常渲染预览内容

完整修改后代码

<template>
  <div>
    <figure>
      <a class="img-box" @click.prevent="openLightbox(0)" data-lightbox="image" data-title="#">
        <img
            :src="media[0].thumb"
            alt="test1"
        >
      </a>
      <figcaption class="mt-3">test1</figcaption>
    </figure>

    <figure>
      <a class="img-box" @click.prevent="openLightbox(1)" data-lightbox="image" data-title="#">
        <img
            :src="media[1].thumb"
            alt="test2"
        >
      </a>
      <figcaption class="mt-3">test2</figcaption>
    </figure>
    <ImageLightBox :media="media" ref="lightbox" :show-light-box="false" :show-caption="true"></ImageLightBox>
  </div>
</template>
<script>
import ImageLightBox from 'vue-image-lightbox';

require("vue-image-lightbox/dist/vue-image-lightbox.min.css");

export default {
  name: 'lightbox',
  components: {
    ImageLightBox,
  },
  methods: {
    openLightbox(index) {
      this.$refs.lightbox.openImage(index)
    }
  },
  data() {
    return {
      media: [
        {
          thumb: 'https://www.pakutaso.com/shared/img/thumb/YAMAhokkaido015_TP_V.jpg',
          src: 'https://www.pakutaso.com/shared/img/thumb/YAMAhokkaido015_TP_V.jpg',
        },
        {
          thumb: 'https://www.pakutaso.com/shared/img/thumb/YAMAhokkaido032_TP_V.jpg',
          src: 'https://www.pakutaso.com/shared/img/thumb/YAMAhokkaido032_TP_V.jpg',
        },
        {
          thumb: 'https://www.pakutaso.com/shared/img/thumb/KMKC428D354_TP_V.jpg',
          src: 'https://www.pakutaso.com/shared/img/thumb/KMKC428D354_TP_V.jpg',
        }
      ],
    }
  }
}
</script>

修改完成后点击任意预览图都会唤起灯箱，默认打开你点击的对应图片，同时支持滑动浏览media数组里的所有3张图片。

内容的提问来源于stack exchange，提问作者katahik