基于vant的ImagePreview组件的使用

ImagePreview组件的调用方式：

1.组件内嵌方式

//1.引入
import { ImagePreview } from 'vant';
Vue.use(ImagePreview);

//使用
<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;
  }
}
}

2.函数调用

对于函数调用基于该种引入方式：

import { ImagePreview } from 'vant';

Vue.use(ImagePreview);

并不起作用，需要改变组件的引入方式，在需要使用的页面单独引入，如下：

//1.引入
import {ImagePreview} from "vant";

//2在函数中使用
 ImagePreview({images: this.images, startPosition: index});//this.images为图片资源

点赞是最好的支持，关注是最大的鼓励。亲爱的朋友，很荣幸在简书遇到您,若有疑问，欢迎探讨~~~。