viewerjs在vue中实现点击图片预览、切换、缩放、拖拽、旋转等功能

<template>
  <div>
    <viewer :images="imageUrls">
      <img v-for="(image, index) in imageUrls" :src="image" :key="index" @click="selectImage(index)">
    </viewer>
  </div>
</template>
 
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
 
export default {
  data() {
    return {
      imageUrls: [
        'image1.jpg',
        'image2.jpg',
        // ...
      ],
      viewer: null,
    };
  },
  mounted() {
    this.viewer = new Viewer(this.$el, {
      // 可以在这里配置Viewer.js的选项
      inline: true, // 允许点击图片后直接显示，而非先弹出全屏显示
      button: true, // 显示右上角关闭按钮
      // ...
    });
  },
  methods: {
    selectImage(index) {
      this.viewer.view(index); // 点击图片后，使用Viewer实例的view方法来显示当前图片
    }
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy(); // 组件销毁前，记得销毁Viewer实例
    }
  }
};
</script>

这个代码示例展示了如何在Vue组件中集成Viewer.js来实现点击图片后的预览功能。viewer 指令用于包裹图片元素，并接收一个图片URL数组作为属性。selectImage 方法用于处理点击事件，并使用Viewer实例的 view 方法来显示选中的图片。在组件销毁前，确保销毁Viewer实例以防止内存泄漏。