vue图片预览

蔚落 2023-07-18 02:48 82阅读 0赞

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

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

  1. <div class="comment_image_box_list" v-for="(imgitem, imgindex) in item.img_url" :key="imgindex+'i'">
  2.     <img :src="imgitem" alt="" @click="showPopup(imgitem, 1)" />
  3. </div>
  4. <div class="comment_image_box_list" v-for="(vdoitem, vdoindex) in item.video_url" :key="vdoindex+ 'v'">
  5.     <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>
  6. </div>

2.准备一个弹框:

  1. <van-popup v-model="popubIsShow">
  2.    <img class="popubImg" :src="img_src" alt="" v-if="popup_type == 1" />
  3.    <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>
  4. </van-popup>

3.data准备变量:

  1. data() { 
  2.     return { 
  3.         popubIsShow: false,
  4.         img_src: ''
  5.         };
  6.     },

4.定义方法:

  1. showPopup(src, type) { 
  2.     this.img_src = src
  3.     this.popubIsShow = true;
  4.     this.popup_type = type
  5. },

ok,解决

发表评论

表情：
评论列表 （有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读