注意：这个插件主要使用的是vue的Vue-Awesome-Swiper轮播插件.使用这个插件之前需要:
1.npm install vue-awesome-swiper --save
2.在主要文件全局引入：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3.lookImages.vue如下：其中dataSourse是文件集合（所有文件数据，可以是所有图片文件，类型是数组），visible是判断页面是否显示状态。fileId是当前选中查看大图文件id.(注意里面很多操作是因为项目逻辑处理的原因，可根据自己逻辑来删掉一些）
预览效果：上面点击跳转到某页，下面可以滑动。点击全屏可查看全屏，f11可推出全屏。
<template>
<div id="lookImages-page">
<div class="lookImages" v-if="visible">
<div class="lookImages-content">
<div class="lookImages-returnBanner">
<div class="lookImages-return" @click="subtract" v-if="fileIndex !== 0"><Icon type="ios-arrow-back" size="60"/></div>
</div>
<div class="lookImages-close" @click="returnTo"><Icon type="md-close" size="40"/></div>
<div class="lookImages-top">
<div class="lookImages-top-title">{{list[fileIndex] && list[fileIndex].fileName}}</div>
<div class="flex1" style="z-index:99;" @click="FullScreen" id="FullScreenImages">
<img v-if="list[fileIndex] && list[fileIndex].path" :src="list[fileIndex].path"/>
<img v-else-if="!list[fileIndex].path && list[fileIndex].response && list[fileIndex].response.url" :src="list[fileIndex].response.url"/>
<img v-else-if="(!list[fileIndex].path && !list[fileIndex].response) && list[fileIndex].url" :src="list[fileIndex].url"/>
<img v-else :src="list[fileIndex]"/>
</div>
<!-- <div class="flex1" @click="FullScreen" id="FullScreenImages" style="position: absolute;top: 70px;z-index:9;">
</div> -->
<div class="lookImages-top-footer">
<span @click="FullBtnScreen"><Icon type="md-expand" style="padding-right:15px;cursor:pointer;"/>全屏</span>
<span @click="downLoadFile(list[fileIndex])"><Icon type="md-arrow-down" style="padding-right:15px;cursor:pointer;"/>下载</span>
</div>
</div>
<div class="lookImages-bottom">
<div style="width:70%;margin:0 auto;">
<div class="swiper swiperBox" v-swiper:swiper="swiperOption" ref="swiperBox">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in list" :key="'swiperBox'+index">
<img v-if="item.path" :src="item.path" class="lookImages-swipers" @click="selectImages(index)"/>
<img v-else-if="!item.path && item.response && item.response.url" :src="item.response.url" class="lookImages-swipers" @click="selectImages(index)"/>
<img v-else-if="(!item.path && !item.response) && item.url" :src="item.url" class="lookImages-swipers" @click="selectImages(index)"/>
<img v-else :src="item" class="lookImages-swipers" @click="selectImages(index)"/>
</div>
</div>
</div>
<div class="swiper-button-next swiper-button-white" style="height: 20px;"></div>
<div class="swiper-button-prev swiper-button-white" style="height: 20px;"></div>
</div>
</div>
<div class="lookImages-goBanner">
<div class="lookImages-go" @click="add" v-if="fileIndex < (list.length - 1)"><Icon type="ios-arrow-forward" size="60"/></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['dataSourse', 'fileId', 'visible'],
data() {
return {
fileIndex: 0,
list: [],
swiperOption: {
// autoplay: true,
speed: 1000,
slidesPerView: 'auto',
watchOverflow: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
};
},
watch: {
fileId(newVal, oldVal) {
this.fileId = newVal;
},
visible(newVal, oldVal) {
let that = this;
let obj = [];
console.log('this.dataSourse');
console.log(this.dataSourse);
this.dataSourse && this.dataSourse.forEach(function(x, i) {
// console.log(x);
if (x.id) {
if (x.fileType) {
let fileType = x.fileType;
if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'png') {
obj.push(x);
}
} else {
let len = null;
let fileType = '';
if (x.path) {
len = x.path.split('.').length;
fileType = x.path.split('.')[len - 1].toLowerCase();
} else if (!x.path && x.url) {
len = x.url.split('.').length;
fileType = x.url.split('.')[len - 1].toLowerCase();
}
if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'png') {
obj.push(x);
}
}
} else if (!x.id && x.response && x.response.id) {
let len = x.response.url.split('.').length;
let fileType = x.response.url.split('.')[len - 1].toLowerCase();
if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'png') {
obj.push(x);
}
} else {
obj.push(x);
}
});
// console.log('sdsds', obj);
this.list = obj;
obj.forEach(function(x, i) {
if (x.id) {
if (x.id === that.fileId) {
that.fileIndex = i;
}
} else {
if (i === that.fileId) {
that.fileIndex = i;
}
}
});
}
},
mounted() {
// console.log('fileId', this.fileId, this.dataSourse);
let that = this;
let obj = [];
this.dataSourse && this.dataSourse.forEach(function(x, i) {
if (x.id) {
if (x.fileType) {
let fileType = x.fileType;
if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'png') {
obj.push(x);
}
} else {
let len = null;
let fileType = '';
if (x.path) {
len = x.path.split('.').length;
fileType = x.path.split('.')[len - 1].toLowerCase();
} else if (!x.path && x.url) {
len = x.url.split('.').length;
fileType = x.url.split('.')[len - 1].toLowerCase();
}
if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'png') {
obj.push(x);
}
}
} else if (!x.id && x.response && x.response.id) {
let len = x.response.url.split('.').length;
let fileType = x.response.url.split('.')[len - 1].toLowerCase();
if (fileType === 'jpg' || fileType === 'jpeg' || fileType === 'png') {
obj.push(x);
}
} else {
obj.push(x);
}
});
this.list = obj;
obj.forEach(function(x, i) {
if (x.id) {
if (x.id === that.fileId) {
that.fileIndex = i;
}
} else {
if (i === that.fileId) {
that.fileIndex = i;
}
}
});
// console.log(this.fileId);
// console.log(this.fileIndex);
},
methods: {
returnTo() {
console.log('returnTo');
// this.visible = false;
this.$emit('close');
},
selectImages(index) {
this.fileIndex = index;
},
subtract() {
this.fileIndex--;
},
add() {
this.fileIndex++;
},
FullScreen(e) {
var el = e.srcElement || e.target;
var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
// target兼容Firefox
// el.innerHTML === '<img src="' + this.list[this.fileIndex].path + '"style="width:100%;height:100%;"/>' ? el.innerHTML = '退出全屏' : el.innerHTML = '<img src="' + this.list[this.fileIndex].path + '"style="width:100%;height:100%;"/>';
// console.log('document.fullScreen', isFullscreen);
if (!isFullscreen) {
// 进入全屏,多重短路表达式
(el.requestFullscreen && el.requestFullscreen()) ||
(el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
(el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen());
} else {
// 退出全屏,三目运算符
document.exitFullscreen ? document.exitFullscreen() : '';
document.mozCancelFullScreen ? document.mozCancelFullScreen() : '';
document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
}
},
FullBtnScreen(e) {
document.getElementById('FullScreenImages').click();
},
downLoadFile(item) {
// window.location.href = item.path;
if (item.path) {
window.open(item.path);
} else {
window.open(item);
}
}
}
};
</script>
<style scoped>
#lookImages-page .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{
opacity: 0 !important;
}
#lookImages-page .swiper-button-prev{
left: 8% !important;
cursor: pointer !important;
}
#lookImages-page .swiper-button-next{
right: 8% !important;
cursor: pointer !important;
}
#lookImages-page .swiper-slide{
width: auto !important;
}
html:-moz-full-screen {
background: grey;
}
html:-webkit-full-screen {
background: grey;
}
html:fullscreen {
background: grey;
}
#lookImages-page .lookImages-return{
color: #fff;
position: absolute;
top: 50%;
margin-top: -30px;
cursor:pointer;
}
#lookImages-page .lookImages-goBanner{
color: #fff;
position: absolute;
right: 8%;
cursor: pointer;
height: calc(100% - 228px);
width: 60px;
}
#lookImages-page .lookImages-returnBanner{
color: #fff;
position: absolute;
left: 8%;
cursor: pointer;
height: calc(100% - 228px);
width: 60px;
}
#lookImages-page .lookImages-go{
color: #fff;
position: absolute;
right: 0;
top:50%;
margin-top: -30px;
cursor: pointer;
}
#lookImages-page .lookImages-close{
position: absolute;
top: 20px;
right: 20px;
color: #fff;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
cursor:pointer;
}
#lookImages-page .lookImages-top-title{
color: #fff;
font-size: 24px;
font-weight: bold;
padding: 17px 0;
}
#lookImages-page .lookImages-top-footer{
text-align: right;
color: #fff;
padding: 13px 0 16px 0;
font-size: 24px;
max-height: 65px;
overflow: hidden;
}
#lookImages-page .lookImages-swipers{
width: 170px;
height: 115px;
margin-right: 10px;
cursor:pointer;
}
#lookImages-page .lookImages{
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background-color: #181818;
left: 0;
z-index: 99;
}
#lookImages-page .lookImages-top{
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
flex-direction: column;
width: 70%;
margin: 0 auto;
position:relative;
overflow:hidden;
}
#lookImages-page .lookImages-bottom{
text-align: center;
padding: 25px 0 23px 0;
background-color: #000;
overflow-x: auto;
position: relative;
}
#lookImages-page .lookImages-content{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-moz-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;
flex-direction: column;
height: 100vh;
overflow:hidden;
}
#lookImages-page .flex1{
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;
overflow:hidden;
}
#lookImages-page .lookImages-top img{
width:100%;
height:100%;
}
</style>
网友评论