当前位置: 首页 > 文档资料 > VUX 中文文档 >

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)
  }
}

属性

名字类型默认值说明版本要求
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
v2.9.1跳转到下一张v2.5.10
getCurrentIndex获取当前图片索引v2.6.3
重要提示及已知问题

重要提示及已知问题

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

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