WARNING

请在手机模拟器模式查看该功能

imagePreview props

属性	描述	类型	默认值
images	预览图片的列表	_ array _	[]
initialIndex	初始预览的图片下标	number	-
swipeDuration	切换图片的动画时长（ms）	number	500
showIndicators	是否展示计数器	boolean	true
indicatorPosition	计数器位置（top, bottom可选）	string	top
loop	是否循环	boolean	true)
closeable	是否显示关闭按钮	boolean	false
maxZoom	最大放大的倍数	number	3
minZoom	最小缩小的倍数	number	1 / 3
onHide	关闭的回调函数，返回参数data（包含关闭图片的index和图片地址）（关闭动画还未结束），函数调用时可传	funtion	-
onScale	放大的回调函数，返回参数data (包含放大倍数和图片下标），函数调用时可传	funtion	-
onChange	切换图片时的回调，返回参数index（当前预览图片的下标），函数调用时可传	funtion	-
zIndex	层级样式	number	1000

imagePreview events

名称	描述	参数
close	当imagePreview关闭动画结束后的回调	-
hide	hide事件（过度动画还未结束）	data（包含关闭图片的index和图片地址）
change	切换图片时的回调	index
scale	放大图片的回调	data（包含放大倍数和图片下标）

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">函数形式的用法</p>
      <vill-button @click="openPreview">函数形式的用法</vill-button>
    </div>
    <div class="items">
      <p class="item_title">组件形式的用法</p>
      <vill-button @click="visible=true">组件形式的用法</vill-button>
      <vill-image-preview v-model="visible" :images="imglist" />
      <p class="item_change">{{visible}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imglist: [],
      visible: false
    }
  },
  created() {
    this.imglist = [
      this.$withBase('/assets/imgs/slide/1_1.png'),
      this.$withBase('/assets/imgs/slide/1_2.png'),
      this.$withBase('/assets/imgs/slide/1_3.png'),
      this.$withBase('/assets/imgs/slide/1_4.png')
    ]
  },
  methods: {
    openPreview() {
      this.$imagePreview({
        images: this.imglist,
        initialIndex: 1,
        indicatorPosition: 'bottom',
        maxZoom: 5,
        minZoom: 1 / 2,
        loop: false,
        closeable: true,
        onChange: (index) => {
          console.log(index)
        },
        onHide: (data) => {
          console.log('我关闭了', data)
        },
        onScale: (data) => {
          console.log('scale:', data)
        }
      })
    }
  }
}
</script>