vue项目中使用vue-picture-preview插件实现图片预览

1.vue-picture-preview插件简介

一个简单易用的图片浏览组件，支持滑动换图，支持手势缩放，不支持显示当前时第几张和总共多少张

2.使用方法

2.1 下载插件

npm install --save vue-picture-preview

2.2 全局注册插件或者局部注册插件

// main.js中全局注册
import Vue from 'vue'
import vuePicturePreview from 'vue-picture-preview';

Vue.component('Previewer', vuePicturePreview);

// 要使用的组件中局部注册
<script>
import vuePicturePreview from "vue-picture-preview";
export default {
 components: {
    Previewer: vuePicturePreview,
  },
}

</script>

2.3 组件中使用

<template>
<div>
     <img  @click="imgOnclick" :src="src" />
<previewer ref="previewer" :list="list" @on-close="closedPreviewer">
 </div>
</template>
<script>
import vuePicturePreview from "vue-picture-preview";
export default {
 components: {
    Previewer: vuePicturePreview,
  },
   data() {
    return {
      list: [
        {
          msrc: "https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg",
          src: "https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg",
          w: 600,
          h: 400,
        },
        {
          msrc: "https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg",
          src: "https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg",
          w: 600,
          h: 400,
        },
        {
          msrc: "https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg",
          src: "https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg",
          w: 600,
          h: 400,
        },
      ],
    };
  },
  methods: {
    show(index) {
      // 显示特定index的图片，使用ref
      this.$refs.previewer.show(index);
    },
    closedPreviewer() {
      this.list = [];
    },
  },
  
}

</script>