vue-picture-preview
移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.
安装
npm install --save vue-picture-preview
使用
入口文件中全局引入
; Vue;
按需局部引入
; 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>
{ 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: { // find thumbnail element let thumbnail = document index ; // get window scroll Y let pageYScroll = windowpageYOffset || documentdocumentElementscrollTop; // optionally get horizontal scroll // get position of element relative to viewport let rect = thumbnail; // w = width return x: rectleft y: recttop + pageYScroll w: rectwidth ; // Good guide on how to get element coordinates: // http://javascript.info/tutorial/coordinates } ; } methods: { // 显示特定index的图片,使用ref this$refspreviewer; } ;
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
---|---|---|---|---|
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 本身要求设置宽高,本组件会尝试对没有设置宽高的图片先加载再显示,可能会造成性能问题或者宽带浪费。