Vant 中文入门教程 Vant ImagePreview 图片预览

2024-02-25 开发教程 Vant 中文入门教程匿名 8℃

引入

ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。

import Vue from 'vue';
import { ImagePreview } from 'vant';
Vue.use(ImagePreview);

代码演示

基础用法

直接传入图片数组，即可展示图片预览

ImagePreview([
  'https://img.yzcdn.cn/1.jpg',
  'https://img.yzcdn.cn/2.jpg'
]);

传入配置项

通过传入配置对象，可以指定初始图片的位置、监听关闭事件

ImagePreview({
  images: [
    'https://img.yzcdn.cn/1.jpg',
    'https://img.yzcdn.cn/2.jpg'
  ],
  startPosition: 1,
  onClose() {
    // do something
  }
});

异步关闭

通过asyncClose属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览

const instance = ImagePreview({
  images: [
    'https://img.yzcdn.cn/1.jpg',
    'https://img.yzcdn.cn/2.jpg'
  ],
  asyncClose: true
});
setTimeout(() => {
  instance.close();
}, 1000);

组件调用

如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 Vue.use 注册组件

<van-image-preview v-model="show" :images="images" @change="onChange">
  <template v-slot:index>第{{ index }}页</template>
</van-image-preview>

export default {
  data() {
    return {
      show: false,
      index: 0,
      images: [
        'https://img.yzcdn.cn/1.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]
    };
  },
  methods: {
    onChange(index) {
      this.index = index;
    }
  }
}

API

Options

通过函数调用 ImagePreview 时，支持传入以下选项：

参数名	说明	类型	默认值
images	需要预览的图片 URL 数组	string[]	`[]`
startPosition	图片预览起始位置索引	number \| string	`0`
swipeDuration	动画时长，单位为`ms`	number \| string	`500`
showIndex	是否显示页码	boolean	`true`
showIndicators	是否显示轮播指示器	boolean	`false`
loop	是否开启循环播放	boolean	`true`
onClose	关闭时的回调函数	Function	-
onChange `v2.0.3`	切换图片时的回调函数，回调参数为当前索引	Function	-
asyncClose	是否开启异步关闭	boolean	`false`
closeOnPopstate	是否在页面回退时自动关闭	boolean	`false`
className	自定义类名	any	-
lazyLoad	是否开启图片懒加载，须配合 Lazyload组件使用	boolean	`false`
maxZoom	手势缩放时，最大缩放比例	number \| string	`3`
minZoom	手势缩放时，最小缩放比例	number \| string	`1/3`

Props

通过组件调用 ImagePreview 时，支持以下 Props：

参数	说明	类型	默认值
images	需要预览的图片 URL 数组	string[]	`[]`
start-position	图片预览起始位置索引	number \| string	`0`
swipe-duration	动画时长，单位为 ms	number \| string	`500`
show-index	是否显示页码	boolean	`true`
show-indicators	是否显示轮播指示器	boolean	`false`
loop	是否开启循环播放	boolean	`true`
async-close	是否开启异步关闭	boolean	`false`
close-on-popstate	是否在页面回退时自动关闭	boolean	`false`
class-name	自定义类名	any	-
lazy-load	是否开启图片懒加载，须配合 Lazyload组件使用	boolean	`false`
max-zoom	手势缩放时，最大缩放比例	number \| string	`3`
min-zoom	手势缩放时，最小缩放比例	number \| string	`1/3`

Events

通过组件调用 ImagePreview 时，支持以下事件：

事件	说明	回调参数
close	关闭时触发	{ index: 索引, url: 图片链接 }
change	切换当前图片时触发	index, 当前图片的索引

Slots

通过组件调用 ImagePreview 时，支持以下插槽：

名称	说明
index	自定义页码内容
cover	自定义覆盖在图片预览上方的内容

onClose 回调参数

参数名	说明	类型
url	当前图片 URL	string
index	当前图片的索引值	number

常见问题

在桌面端无法操作组件？

参见在桌面端使用。

实例演示

上一节： Vant Divider 分割线

下一节： Vant Lazyload 图片懒加载

"Vant 中文入门教程"的目录