Package Exports

vue-picture-preview

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-picture-preview) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-picture-preview

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

demo

安装

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 本身要求设置宽高，本组件会尝试对没有设置宽高的图片先加载再显示，可能会造成性能问题或者宽带浪费。