适用于移动端、PC 端 Vue.js 图片预览插件

1、安装：npm install --save vue-picture-preview

2、使用：

（1）入口文件中main.js中全局引入：

import Vue from 'vue'

import vuePicturePreview from 'vue-picture-preview';

Vue.component('Previewer', vuePicturePreview);

（2）按需局部引入：

import vuePicturePreview from 'vue-picture-preview';

export default {

  components: {

    Previewer: vuePicturePreview

  }

}

（3）示例

// 在dom中使用如下代码：

<div>

    <img

        class="previewer-demo-img"

        v-for="(item, index) in list"

        :src="item.src"

        width="100"

        @click="show(index)"

        :key="index"

      />

      <previewer ref="previewer" :list="list" :options="options"> </previewer>

</div>

// 数据和逻辑处理代码如下：

export default {

  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

        }

      ],

      options: {

        getThumbBoundsFn(index) {

          // 找到缩略图的元素

          let thumbnail = document.querySelectorAll('.previewer-demo-img')[

            index

          ];

          // 得到y轴滚动的距离

          let pageYScroll =

            window.pageYOffset || document.documentElement.scrollTop;

          // 可以选择水平滚动

          // 获取元素相对于视口的位置

          let rect = thumbnail.getBoundingClientRect();

          // w = width

          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };

          // Good guide on how to get element coordinates:

          // http://javascript.info/tutorial/coordinates

        }

      }

    };

  },

 methods: {

    show(index) {

      // 显示特定index的图片，使用ref

      this.$refs.previewer.show(index);

    }

  }

};

参考网址：https://www.npmjs.com/package/vue-picture-preview

 

（4）项目中实战：

 

 

 

 

 

 

图片数组处理：