vue图片预览

vue结合vant实现图片视频预览

1. 给图片或视频添加点击事件

<div class="comment_image_box_list" v-for="(imgitem, imgindex) in item.img_url" :key="imgindex+'i'">
	<img :src="imgitem" alt="" @click="showPopup(imgitem, 1)" />
</div>
<div class="comment_image_box_list" v-for="(vdoitem, vdoindex) in item.video_url" :key="vdoindex+ 'v'">
	<video :src="vdoitem" @click="showPopup(vdoitem, 2)" :poster="vdoitem + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'"></video>
</div>

2.准备一个弹框:

<van-popup v-model="popubIsShow">
   <img class="popubImg" :src="img_src" alt="" v-if="popup_type == 1" />
   <video class="popubImg" :src="img_src" :poster="img_src + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'" controls v-if="popup_type == 2"></video>
</van-popup>

3.data准备变量:

data() {
	return {
		popubIsShow: false,
		img_src: ''
		};
	},

4.定义方法:

showPopup(src, type) {
	this.img_src = src
	this.popubIsShow = true;
	this.popup_type = type
},

ok,解决