找了很多查看大图的组件发现都没办法自定义样式,或不能缩放(wc-viewer v-viewer ),于是就自己写了一个
主要思路就是运用swiper
1使用方法
<template>
<div class="size-detail">
<bigImg :imgList="imgList" :show.sync="showBigImg"></bigImg>
<button @click="showBigImg=!showBigImg">大图弹窗</button>
</div>
</template>
<script>
import bigImg from "@/components/big-img";
export default {
components: {
bigImg,
},
data() {
return {
imgList: [
{
url:
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1547303486,112665549&fm=26&gp=0.jpg",
},
{
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1088335163,3385135939&fm=26&gp=0.jpg",
},
{
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgo173.gda086.com%2Fimg2020%2F11%2F17%2F14%2F2020111736164127.jpg&refer=http%3A%2F%2Fimgo173.gda086.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611822122&t=2578bfe10a9002d73a52deb6137ffe8d",
},
{
url:
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=339612859,517673817&fm=26&gp=0.jpg",
},
],
showBigImg:false,
};
},
};
</script>
<style lang="scss" scoped>
</style>
2.组件big-img.vue
<template>
<div
class="big-img"
:class="{hideo:!show,fadeIn:show}"
@touchmove.prevent
>
<div
class="icon-close"
@click="onClose"
>
<img src="../images/icon-close.png">
</div>
<div class="content">
<swiper
:options="swiperOption"
ref="myswiper"
>
<swiper-slide
v-for="(item, index) in imgList"
:key="index"
>
<div class="swiper-zoom-container">
<img
class="slide-img"
:src="item.url"
>
</div>
</swiper-slide>
</swiper>
</div>
<div class="page">{{currIndex}}/{{imgList.length||0}}</div>
</div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
components: {
swiper,
swiperSlide,
},
props: {
show: {
type: Boolean,
default: false,
},
imgList: {
type: Array,
},
},
data() {
return {
currIndex: 1,
swiperOption: {
zoom: true,
on: {
slideChange: (e) => {
this.currIndex =
this.$refs.myswiper.swiper.activeIndex + 1;
},
},
},
};
},
created() {},
methods: {
onClose() {
this.$emit("update:show", false);
},
},
};
</script>
<style lang="scss">
.big-img {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
position: fixed;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
.icon-close {
position: fixed;
left: 15px;
top: 30px;
padding: 10px;
width: 42px;
height: 42px;
img {
width: 22px;
height: 22px;
}
}
.content {
width: 100%;
overflow: hidden;
}
.swiper-zoom-container {
height: 415px;
display: flex;
align-items: center;
justify-content: center;
.slide-img {
width: 100%;
}
}
.page {
width: 100%;
font-size: 14px;
font-weight: 400;
color: #ffffff;
text-align: center;
position: absolute;
left: 0;
bottom: 40px;
}
}
.hideo {
display: none !important;
}
.fadeIn {
-webkit-animation: fadeInDown 0.2s forwards;
animation: fadeInDown 0.2s forwards;
}
@keyframes fadeInDown {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
样式可自行修改