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) {
let thumbnail = document.querySelectorAll('.previewer-demo-img')[
index
];
let pageYScroll =
window.pageYOffset || document.documentElement.scrollTop;
let rect = thumbnail.getBoundingClientRect();
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
}
}
};
},
methods: {
show(index) {
this.$refs.previewer.show(index);
}
}
};
属性
事件
名字 | 参数 | 说明 | 版本要求 |
---|
@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 本身要求设置宽高,本组件会尝试对没有设置宽高的图片先加载再显示,可能会造成性能问题或者宽带浪费。