注意避免使用过大图片，否则可能会出现卡顿黑屏的情况(尤其是在 Android 机子上) #2514。
list的数据示例如图：
[{
src: 'https://placekitten.com/800/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
msrc: 'https://placekitten.com/120/90', // 缩略图
w: 1200,
h: 900
}]
注意在 v2.4.0 之前 w 和 h 都必须填写
显示特定index的图片，使用ref:
this.$refs.previewer.show(index)
注意，当你自定义添加按钮时，需要在 photoswipe 选项设置 clickable 元素，否则点击将没有响应
<previewer ref="previewer" :list="previewerList" :options="options">
<template slot="button-after">
<span class="previewer-delete-icon-box">
<img src="../assets/previewer_delete_icon.png" width="22" height="22" class="previewer-delete-icon" @click.prevent.stop="removeImg">
</span>
</template>
</previewer>
options: {
isClickableElement: function (el) {
return /previewer-delete-icon/.test(el.className)
}
}
API
重要提示及已知问题
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| list | array | 图片列表 | -- | |
| options | object | photoswipe的设置 | -- |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-close | -- | 关闭时触发 | v2.2.1-rc.4 |
| @on-index-change | -- | 切换图片后触发(首次打开不会触发) | v2.8.1 |
插槽
| 名字 | 说明 | 版本要求 |
| button-after | 操作按钮之后，可以添加自定义图标 | v2.6.3 |
| button-before | 操作按钮之前，可以添加自定义图标 | v2.6.3 |
方法
| 名字 | 参数 | 说明 | 版本要求 |
| goTo | (index) | 跳转到特定图片 | v2.5.10 |
| prev | 跳转到上一张 | v2.5.10 | |
| v2.9.1 | 跳转到下一张 | v2.5.10 | |
| getCurrentIndex | 获取当前图片索引 | v2.6.3 |
重要提示及已知问题
- Q建议为所有图片定义尺寸
PhotoSwipe 本身要求设置宽高，Previewer 组件会尝试对没有设置宽高的图片先加载再显示，可能会造成性能问题或者宽带浪费。 相关 issue:#2321
Changelog
发布日志
- v2.8.1 [feature] 支持事件 on-index-change #2505
- v2.6.4 [feature] 方便删除操作，绑定数据减少一张时自动更新示图，有更多图片时切换到下一张，没有时将自动关闭预览
- v2.6.3 [fix] 修复组件函数名字以下划线开头将会被 Vue(2.4.4) 警告的问题 #2001
- v2.6.3 [feature] 添加 getCurrentIndex 方法
- v2.6.3 [feature] 添加 slot:button-before 和 slot:button-after
- v2.5.10 [enhance] 支持 goTo 方法 #1888
- v2.4.0 [enhance] 使用图片作为缩略图，防止先显示黑色区域
- v2.4.0 [enhance] 不再强制要求设置宽高 #1426
- v2.2.1-rc.4 [enhance] 增加关闭事件 #1245