<template>
|
<div v-if="show" class="image-main">
|
<!-- @click="cancel" -->
|
<div class="preview_close" @click="cancel">
|
<i class="el-icon-close" />
|
</div>
|
<el-carousel
|
:height="windowHeight"
|
:autoplay="false"
|
indicator-position="none"
|
:initial-index="index"
|
@change="onSlideChange"
|
>
|
<el-carousel-item v-for="(item, i) in multiFilesList" :key="i">
|
<img v-if="item.type === 0" :src="resourcePath + item.fileurl" alt="" />
|
<video ref="video" v-else-if="item.type === 1" :src="resourcePath + item.fileurl" controls="controls"></video>
|
</el-carousel-item>
|
</el-carousel>
|
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'ShowImage',
|
|
data () {
|
return {
|
show: false,
|
multiFilesList: [],
|
temp: {},
|
resourcePath: '',
|
index: 0,
|
windowHeight: document.documentElement.clientHeight + 'px',
|
}
|
},
|
mounted() {
|
const that = this;
|
window.addEventListener('resize', () => {
|
that.windowHeight = document.documentElement.clientHeight + 'px'
|
})
|
},
|
methods: {
|
open (multiFilesList, resourcePath, index) {
|
this.show = true
|
this.multiFilesList = multiFilesList
|
this.temp = multiFilesList[index]
|
this.resourcePath = resourcePath
|
this.index = index
|
},
|
cancel () {
|
this.show = false
|
},
|
onSlideChange () {
|
let video = this.$refs.video
|
if (!video.length) return
|
video.forEach((item) => {
|
item.pause()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.image-main {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba($color: #000000, $alpha: 0.4);
|
z-index: 9999;
|
.preview_close {
|
position: fixed;
|
right: 50px;
|
top: 50px;
|
width: 70px;
|
height: 70px;
|
// border-radius: 50%;
|
// background: #B2B2B2;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 99999;
|
.el-icon-close {
|
font-size: 50px;
|
color: #fff;
|
}
|
}
|
img {
|
max-width: 100%;
|
max-height: 100%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
video {
|
max-width: 100%;
|
max-height: 100%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
.preview_content {
|
height: 100%;
|
position: relative;
|
top: 50%;
|
left: 0;
|
transform: translate(0, -50%);
|
.swiper {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.swiper-slide {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.preview_content_box {
|
width: 100%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
}
|
}
|
}
|
}
|
// .image-item-style {
|
// position: relative;
|
// width: 120px;
|
// height: 120px;
|
// overflow: hidden;
|
// margin-right: 10px;
|
// margin-bottom: 10px;
|
// .video-inner-style {
|
// max-width: 100%;
|
// height: 100%;
|
// cursor: pointer;
|
// }
|
// .el-icon-caret-right {
|
// position: absolute;
|
// top: 50%;
|
// left: 50%;
|
// transform: translate(-50%, -50%);
|
// // height: 10%;
|
// // width: 10%;
|
// font-size: 30px;
|
// color: rgba($color: #fff, $alpha: 0.6);
|
// }
|
// // video:hover {
|
// // }
|
// .image-inner-style {
|
// max-width: 100%;
|
// height: 100%;
|
// cursor: pointer;
|
// }
|
// }
|
}
|
</style>
|
