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

时间：2021-02-26 14:28:36 阅读：287 评论：0 收藏：0 [点我收藏+]

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）项目中实战：
 
 
 
 
 
 
图片数组处理：
 

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

原文：https://www.cnblogs.com/yihuanhuan/p/14451566.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)