vue封裝圖片預覽全屏插件

注意：這個插件主要使用的是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是判斷頁面是否顯示狀態(tài)。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>

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容