vue-picture-preview

移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.

安装

npm install --save vue-picture-preview

使用

入口文件中全局引入

import Vue from 'vue'
import vuePicturePreview from 'vue-picture-preview';

Vue.component('Previewer', vuePicturePreview);

按需局部引入

import vuePicturePreview from 'vue-picture-preview';

export default {
  components: {
    Previewer: vuePicturePreview
  }
}

示例

<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) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[
            index
          ];
          // get window scroll Y
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          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);
    }
  }
};

属性

| 名字 | 类型 | 默认值 | 说明 | 版本要求 | | ------- | -------- | ------ | ------------------------------------------------------------ | -------- | | list | array | | 图片列表 | v2.0.0 | | options | object | | PhotoSwipe的配置 | v2.0.0 |

事件

| 名字 | 参数 | 说明 | 版本要求 | | ---------------- | ---- | -------------------------------- | -------- | | @on-close | - | 关闭时触发 | v2.0.0 | | @on-index-change | - | 切换图片后触发(首次打开不会触发) | v2.0.0 |

插槽

| 名字 | 说明 | 版本要求 | | ------------- | -------------------------------- | -------- | | button-after | 操作按钮之后，可以添加自定义图标 | v2.0.0 | | button-before | 操作按钮之前，可以添加自定义图标 | v2.0.0 |

方法

| 名字 | 参数 | 说明 | 版本要求 | | --------------- | ----- | ---------------- | -------- | | goTo | index | 跳转到特定图片 | v2.0.0 | | prev | - | 跳转到上一张 | v2.0.0 | | next | - | 跳转到下一张 | v2.0.0 | | getCurrentIndex | - | 获取当前图片索引 | v2.0.0 |

重要提示

• 注意避免使用过大图片: 否则可能会出现卡顿黑屏的情况(尤其是在 Android 机子上)
• 建议为所有图片定义尺寸: PhotoSwipe 本身要求设置宽高，本组件会尝试对没有设置宽高的图片先加载再显示，可能会造成性能问题或者宽带浪费。