vue使用Viewer.js 实现点击按钮展示图片的效果

 1.首先先在项目中下载viewerjs插件

npm install v-viewer --save-dev

2.效果图

3.vue代码展示：

<template>
  <div>
    <span>
      <el-button @click="openViewer">查看图片</el-button>
    </span>
    <img ref="image" :src="imageSrc" style="display: none;"/>
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';

export default {
  data() {
    return {
      imageSrc: 'https://img95.699pic.com/desgin_photo/40139/4137_list.jpg', // 预览图片的 URL
      viewer: null, // 存储 Viewer 实例
    };
  },
  beforeDestroy() {
    // 在组件销毁时销毁 Viewer 实例
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
  methods: {
    openViewer() {
      // 创建新的 Viewer 实例
      this.$nextTick(() => {
        // 如果已经有 Viewer 实例，则先销毁
        if (this.viewer) {
          this.viewer.destroy();
        }
        // 创建新的 Viewer 实例
        this.viewer = new Viewer(this.$refs.image, {
          inline: false, // 不使用内联模式，强制弹出（使用内联样式就会在页面展示，不弹出）
          navbar: true, // 显示导航
          title: false, // 隐藏标题
          toolbar: true, // 显示工具栏
          zoomable: true, // 支持缩放
          rotatable: true, // 支持旋转
          scalable: true, // 支持缩放
          transition: true, // 启用过渡效果
        });
        // 显示图片
        this.viewer.show();
      });
    },
  },
};
</script>