我這邊藉助了element的dialog元件，進行封裝為自己的公共元件即可

正常頁面 圖片大小

<div v-if="JSON.stringify(authorizedInformation) !== '{}' && authorizedInformation.name != '無'">
     <div v-for="(item, value) in authorizedImg"><img :src="item.url" @click="large(authorizedImg, index)"/>
     </div>
</div>
 

authorizedImg這是一個物件，裡面的type 是對應是img 還是 video 還有一個屬性自然是伺服器路徑url了

video

<video :src="videoUrl"
       @click="large([{type: 'video', url: videoUrl}])">
</video>

點選事件 觸發 子元件

 large(img, index) { // 圖片放大
        if (img.length > 0) {
          this.imgList = img
          this.currentIndex = index
          this.$refs.img.open()
        }
      },
 

<cd-img ref="img"
        :imgList="imgList"
        :index="currentIndex"></cd-img>

其實不難，，主要是樣式問題，一般來說，放大里面加了可以左右按鈕檢視，video自動播放的功而已，直接貼程式碼  HTML

<template>
  <el-dialog
      custom-class="cd-img"
      :visible.sync="centerDialogVisible"
      :close-on-click-modal="false"
      width="90vw"
      @close="close"
      center>
    <div v-if="imgList[currentIndex] != undefined" class="img" :style="'background: url(' + imgList[currentIndex].url + ') center center / contain no-repeat'">
      <el-button type="text" @click="previous" style="left: -3%;" v-if="currentIndex>0">
        <dl-icon type="Left" size="1.5" color="#fff"></dl-icon>
      </el-button>
      <el-button type="text" @click="next" style="right: -3%;" v-if="currentIndex< this.imgList.length - 1">
        <dl-icon type="youjiantou1" size="2" color="#fff"></dl-icon>
      </el-button>
      <video width="100%" height="100%" controls
             ref="video"
             autoplay  loop
             v-if="imgList[currentIndex].type =='video'">
        <source :src="imgList[currentIndex].url" type="video/mp4">
        您的瀏覽器不支援 HTML5 video 標籤。
      </video>
    </div>
  </el-dialog>
</template>
 

CSS

<style lang="scss" rel="stylesheet/scss" scoped>
  .el-dialog__wrapper{
    overflow: hidden !important;
  }
  .cd-img.el-dialog{
    margin-top: 0 !important;
    padding: 0;
    background: transparent;
    box-shadow:0 0 0 transparent;
    .el-dialog__header{
      position: fixed;
      top:5%;
      right:2%;
      z-index: 9999;
      .el-dialog__headerbtn{
        .el-dialog__close {
          background-color: #7e848f;
          border-radius: 50%;
          color:#fff;
          padding: .25rem;
          font-size: 1.25rem;
        }
      }
    }
    .el-dialog__body{
          padding: 0;
          vertical-align: bottom;
        }
    .img{
      width:100%;
      height:100vh;
      position: relative;
      .el-button{
        position: absolute;
        top: 50%;
      }
    }
  }

</style>

JS

<script>
  import {Dialog, Button} from 'element-ui'
  import {DlIcon} from '[email protected]'
  export default {
    name: 'CdImg',
    components: {
      [Button.name]: Button,
      [Dialog.name]: Dialog,
      DlIcon
    },
    componentName: 'CdImg',
    props: {
      data: Object,
      color: {
        type: String,
        default: '#ff5a52'
      },
      imgList: Array,
      index: Number
    },
    data () {
      return {
        centerDialogVisible: false,
        currentIndex: 0
      }
    },
    watch: {
      index: function (newVal, oldVal) {
        this.currentIndex = newVal !== undefined ? newVal : 0
      }
    },
    methods: {
      open () {
        this.centerDialogVisible = true
        if (this.$refs.video !== undefined) {
          this.$refs.video.play()
        }
      },
      next () {
        this.currentIndex = this.currentIndex >= this.imgList.length - 1 ? this.currentIndex : this.currentIndex + 1
      },
      previous () {
        this.currentIndex = this.currentIndex <= 0 ? 0 : this.currentIndex - 1
      },
      close () {
        if (this.$refs.video !== undefined) {
          this.$refs.video.pause()
        }
      }
    },
    mounted () {
    }
  }
</script>

只是記錄一下，希望可以幫助到大家！