pc端图片与视频放大预览

我这边借助了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 'comp@'
  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>

只是记录一下，希望可以帮助到大家！