我这边借助了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>
只是记录一下,希望可以帮助到大家!