【记录】vue图片预览组件

github github.com/mirari/v-vi…

1. 安装依赖 npm install v-viewer --save

2. 全局引入

import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";

Vue.use(Viewer);

3. 使用

<template>
  <viewer
    ref="viewer"
    :options="defaultOptions"
    :images="images"
    @inited="inited"
  >
    <img v-show="false" v-for="(src, index) in images" :src="src" :key="index" />
  </viewer>
</template>
<script>
export default {
  name: "PreviewPicture",
  props: {
    images: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      defaultOptions: {
        title: false,
        zIndex: 9999
      }
    };
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer;
    },
    async show(index = 0) {
      await this.$nextTick()
      this.$viewer.view(index);
    }
  }
};
</script>

<preview-picture ref="previewPicture" :images="images" />

this.$refs.previewPicture.show()