vue项目vant中ImagePreview组件的使用

1、引入import { ImagePreview } from "vant";2、使用//ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。//为你的图片加入点击事件，就会展示大图了。<img v-for="(item,index) in pictureList" :key="index" class...

月落星河°

10199人浏览 · 2019-12-31 16:26:31

月落星河° · 2019-12-31 16:26:31 发布

1、引入

	import { ImagePreview } from "vant";

2、使用

//ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
//为你的图片加入点击事件，就会展示大图了。
    <img v-for="(item,index) in pictureList" :key="index" class="more-img" :src="item.url" @click="HandleclickImg(index)"/>
HandleclickImg(index) {
	ImagePreview({
	  images: [
	    'https://img.yzcdn.cn/1.jpg',
	    'https://img.yzcdn.cn/2.jpg'
	  ],
	  startPosition: index,
	  onClose() {
	    // do something
	  }
	});
}