适用于移动端、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,
          w600,
          h400
        },
        {
          msrc:
            https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg,
          src:
            https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg,
          w600,
          h400
        },
        {
          msrc:
            https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg,
          src:
            https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg,
          w600,
          h400
        }
      ],
      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 { xrect.left, yrect.top + pageYScroll, wrect.width };
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    };
  },
 methods{
    show(index{
      // 显示特定index的图片,使用ref
      this.$refs.previewer.show(index);
    }
  }
};
 
(4)项目中实战:
适用于移动端、PC 端 Vue.js 图片预览插件

 

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

 

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

 

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

图片数组处理:

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

 

 

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

上一篇:vuex及axios的get方法获取数据


下一篇:JavaScript 循环