vue图片点击利用Viewer放大预览

这个里面主要是用到了Viewer，来进行图片的放大，缩放等功能。首先需要安装v-viewer

安装依赖：npm i v-viewer -S

在组件中引入：

import Vue from "vue";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
Vue.use(Viewer);

使用：写入元素

<viewer
      :images="images"
      :options="options"
      class="viewer"
      ref="viewer"
      @inited="inited"
      v-show="images && images.length"
    >
      <img
        v-for="{ source, thumbnail } in images"
        :src="thumbnail"
        :data-source="source"
        :key="source"
        class="image"
      />
    </viewer>

其中使用方法

export default {
  data() {
    return {
      options: {
        url: "data-source"
      },
      index: 0,
      images: []
    };
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer;
      this.$viewer.view(this.index);
    },
    view(index) {
      this.index = index;
      this.$viewer.view(this.index);
    },
    show(images, index = 0) {
      if (this.images === images) {
        this.view(index);
        return;
      }
      this.images = images;
      this.index = index;
    }
  }
};

以上为组件中封装方法，在其他组件中使用需要去引入使用

import ImgViewer from "@/components/imgOpen/imgViewer";//引入当前组件
//对组件进行实例化
components: {
    ImgViewer
  },
//并在dom元素中使用
<ImgViewer ref="viewer" />

点击图片触发

imgPre() {
      const sourceImages = [];
      this.dialogListSS.map(item => {
        sourceImages.push({
          thumbnail: 'url',//图片路径
          source: 'url',//图片路径
        });
      });
      this.$refs.viewer.show(sourceImages, 0);//'0'为显示第几张图片的次序
    },