先上效果图
再上源代码
<template>
<transition name="fade">
<div class="media-wrapper" v-if="seeMedia">
<Button type="text" class="media-close" shape="circle" icon="close" @click="close"></Button>
<div class="media-controller">
<Button-group shape='circle'>
<Button size="large" type="ghost" icon="ios-skipbackward" @click.prevent="prev"></Button>
<Button size="large" type="ghost" icon="ios-skipforward" @click.prevent="next"></Button>
</Button-group>
</div>
<div class="media-content">
<div v-for="(item,index) in data" :key="index" :class="type(index)">
<img :src='item' v-if="isImg(item)" @click="toggle(index)">
<video :src="item" v-else controls="controls" @click="toggle(index)">
</video>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'cjMedia',
data: function () {
return {
nowIndex: 0,
data: [
'/src/test/media/movie.ogg', '/src/test/media/1.jpg', '/src/test/media/2.jpg'
]
}
},
props: {
// data:{
// type:Array
// }
},
methods: {
next() {
if (this.nowIndex == this.data.length - 1) {
this.$Message.warning('已到达最后一张');
} else {
this.nowIndex++;
}
},
prev() {
if (this.nowIndex == 0) {
this.$Message.warning('已到达第一张');
} else {
this.nowIndex--;
}
},
type(index) {
if (index == this.nowIndex) {
return 'media-center'
} else if (index - this.nowIndex == 1) {
return 'media-right'
} else if (index - this.nowIndex == -1) {
return 'media-left'
} else {
return 'media-hide'
}
},
isImg(item) {
var ext = item.substr(item.length - 3, 3);
var flag = ext == ('jpg' || 'png' || 'gif') ? true : false;
return flag;
},
toggle(index) {
if (index - this.nowIndex == 1) {
this.nowIndex++;
} else if (index - this.nowIndex == -1) {
this.nowIndex--;
}
},
close() {
this.$store.commit('SET_MEDIA', false);
this.nowIndex = 0;
}
},
computed: {
seeMedia() {
return this.$store.state.seeMedia;
}
}
}
</script>
<style lang="scss">
.media-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.52);
z-index: 1010;
i {
color: #fff
}
.media-controller {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%)
}
.media-close {
position: absolute;
right: 5px;
top: 5px;
i {
font-size: 30px;
}
}
.media-content {
div {
position: absolute;
top: 50%; // background: green;
color: #fff;
text-align: center;
font-size: 30px;
transition: all .56s ease;
img {
max-width: 100%;
max-height: 100%
}
video {
width: 100%;
}
}
.media-center {
height: 50%;
width: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1011;
}
.media-left,
.media-right {
width: 25%;
height: 35%;
filter: grayscale(90%);
}
.media-right {
left: 100%;
transform: translate(-105%, -50%);
}
.media-left {
left: 0;
transform: translate(5%, -50%);
}
.media-hide {
height: 0;
width: 0;
left: 50%;
z-index: 1010;
opacity: 0;
}
}
}
</style>
data传入媒体路径即可。纯原创,转载请标注来源。
所有评论(0)