Previewer 组件使用教程
优质
小牛编辑
134浏览
2023-12-01
安装
import { Previewer } from 'vux'
export default {
components: {
Previewer
}
}
// 在入口文件全局引入
import Vue from 'vue'
import { Previewer } from 'vux'
Vue.component('previewer', Previewer)
注意避免使用过大图片,否则可能会出现卡顿黑屏的情况(尤其是在 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)
}
}
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
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