vue 图片，视频点击预览按钮方法

图片

使用el-image-viewer组件

写之前注意引入安装组件！！！

主要代码：

<div class="">
      <el-image-viewer v-if="showViewer" :on-close="()=>{showViewer=false}" :url-list="[pic]"/>
</div>

按钮方法：

    viewque(img) {  //按钮触发
      this.showViewer = true;
      this.pic = img;
    },

视频

使用vue-video和 a-modal

<a-modal
  v-model="visibleVideo"
  :footer="null"
  :zIndex="1004"
  :width="900"
  :maskClosable="false"
>
  <my-video v-if="visibleVideo" :sources="video.sources" :options="video.options"></my-video>
</a-modal>

videoque(src) {
  console.log(111)
  this.visibleVideo = true;
  this.video.sources[0].src = src;
  console.log(this.video.sources[0].src)
}