Previewer

Previewer

demo 原始链接demo 源码编辑文档组件源码

previewer - 图1

二维码

previewer - 图2

Install

安装

局部注册

全局注册

  1. import { Previewer } from 'vux'
  2. export default {
  3. components: {
  4. Previewer
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Previewer } from 'vux'
  4. Vue.component('previewer', Previewer)

注意避免使用过大图片,否则可能会出现卡顿黑屏的情况(尤其是在 Android 机子上) #2514。

list的数据示例如图:

  1. [{
  2. src: 'https://placekitten.com/800/400',
  3. w: 600,
  4. h: 400
  5. },
  6. {
  7. src: 'https://placekitten.com/1200/900',
  8. msrc: 'https://placekitten.com/120/90', // 缩略图
  9. w: 1200,
  10. h: 900
  11. }]

注意在 v2.4.0 之前 w 和 h 都必须填写

显示特定index的图片,使用ref:

  1. this.$refs.previewer.show(index)

注意,当你自定义添加按钮时,需要在 photoswipe 选项设置 clickable 元素,否则点击将没有响应

  1. <previewer ref="previewer" :list="previewerList" :options="options">
  2. <template slot="button-after">
  3. <span class="previewer-delete-icon-box">
  4. <img src="../assets/previewer_delete_icon.png" width="22" height="22" class="previewer-delete-icon" @click.prevent.stop="removeImg">
  5. </span>
  6. </template>
  7. </previewer>
  1. options: {
  2. isClickableElement: function (el) {
  3. return /previewer-delete-icon/.test(el.className)
  4. }
  5. }

API

属性

名字类型默认值说明版本要求
listarray图片列表
optionsobjectphotoswipe的设置

事件

名字参数说明版本要求
@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
next跳转到下一张v2.5.10
getCurrentIndex获取当前图片索引v2.6.3

重要提示及已知问题

重要提示及已知问题

  • Q建议为所有图片定义尺寸

PhotoSwipe 本身要求设置宽高,Previewer 组件会尝试对没有设置宽高的图片先加载再显示,可能会造成性能问题或者宽带浪费。相关 issue:#2321

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 35,贡献人数 4
Sanapoint 顼轩ShineKiddairylandickeep

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