vue vant修改源码 ImagePreview 图片预览的组件添加了视频也可以预览

3.0版本可看这个 https://blog.csdn.net/qq_32294071/article/details/126227434

修改的文件

\node_modules\vant\es\image-preview\ImagePreview.js
找到genImages方法
先把"close": _this2.emitClose注释掉
不然ios点击视频播放的时候 弹窗直接关闭 视频无法播放出来

genImages: function genImages() {
      var _this2 = this;

      var h = this.$createElement;
      return h(Swipe, {
        "ref": "swipe",
        "attrs": {
          "lazyRender": true,
          "loop": this.loop,
          "duration": this.swipeDuration,
          "initialSwipe": this.startPosition,
          "showIndicators": this.showIndicators,
          "indicatorColor": "white"
        },
        "class": bem('swipe'),
        "on": {
          "change": this.setActive
        }
      }, [this.images.map(function (image) {
        return h(ImagePreviewItem, {
          "attrs": {
            "src": image,
            "show": _this2.value,
            "active": _this2.active,
            "maxZoom": _this2.maxZoom,
            "minZoom": _this2.minZoom,
            "rootWidth": _this2.rootWidth,
            "rootHeight": _this2.rootHeight
          },
          "on": {
            "scale": _this2.emitScale,
            // "close": _this2.emitClose
          }
        });
      })]);
    },

\node_modules\vant\es\image-preview\ImagePreviewItem.js
找到render方法

render: function render() {
    var h = arguments[0];
    var imageSlots = {
      loading: function loading() {
        return h(Loading, {
          "attrs": {
            "type": "spinner"
          }
        });
      }
    };
    var fileName = this.src;
    var Ttype="";
    let suffix = '';
    let result = '';
    const flieArr = fileName.split('.');
    suffix = flieArr[flieArr.length - 1];
    if(suffix!=""){
        suffix = suffix.toLocaleLowerCase();
        const videolist = ['mp4', 'm2v', 'mkv','webm','ogg','mov'];
        result = videolist.find(item => item === suffix);
        if (result) {
          return h(SwipeItem, {
            "class": bem('swipe-item')
          }, [h('video', {
            "attrs": {
              "controls": "true"
            },
            "class": bem('image', {
              vertical: this.vertical
            }),
            "style": this.imageStyle,
            "scopedSlots": imageSlots,
          },[h('source', {
            "attrs": {
              "src": this.src
            },
          })])]);
        }
        else{
          return h(SwipeItem, {
            "class": bem('swipe-item')
          }, [h(Image, {
            "attrs": {
              "src": this.src,
              "fit": "contain"
            },
            "class": bem('image', {
              vertical: this.vertical
            }),
            "style": this.imageStyle,
            "scopedSlots": imageSlots,
            "on": {
              "load": this.onLoad
            }
          })]);
        }
    }
  }

使用的时候

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

<van-image-preview v-model="option.show" :images="option.images" :closeable="true" :start-position="option.index" @close="imgcolose" @change="onChange"></van-image-preview>


//其他视频停止播放
           onChange(t){
                const that = this
                var videos = document.getElementsByTagName("video");
                for (var j = videos.length - 1; j >= 0; j--) {
                    videos[j].pause();
                }
            },
            imgcolose(){
                var videos = document.getElementsByTagName("video");
                for (var j = videos.length - 1; j >= 0; j--) {
                    videos[j].pause();
                }
            }