项目里面,点击图片,然后调用一个组件。让图片全屏展示,然后点击全屏,组件消失。按理说我没有tap.不会存在点击穿透事件。但是在全屏的时候,下面的其他事件也会触发。
然后分析是因为组件消失太快,然后click事件还在往下传递的原因。所以我让弹窗消失,延迟200毫秒,就解决了问题。
大概代码如下:
// 父组件
:isFull="isFull"
@hideFullFn="hideFullFn"
:slideTo="slideTo"
:fullPicList="fullPicList"
@touchmove.prevent
/>
import FullPic from "../components/detail/full-swiper";
export default {
name: "listDetail",
components: {
FullPic
},
data() {
return {
isFull: false, // 是否全屏展示图片
fullPicList: [], // 全屏图片列表
slideTo: 0, //全屏第几张图片显示
}
},
hideFullFn() {
// 添加延时
setTimeout(() => {
this.isFull = false;
this.fullPicList = [];
}, 200);
}
}
//子组件
class="full-container"
:options="swiperOption2"
ref="mySwiper2"
v-if="isFull"
@click="hideFullFn"
>
var preD = function(e) {
e.preventDefault();
};
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
name: "fullPic",
props: ["isFull", "fullPicList", "slideTo"],
components: {
swiper,
swiperSlide
},
computed: {
swiper2() {
return this.$refs.mySwiper2.swiper;
}
},
watch: {
isFull(flag) {
if (flag) {
document.body.style.overflow = "hidden";
document.addEventListener("touchmove", preD, { passive: false }); //禁止页面滑动
var i = this.slideTo ? this.slideTo : 0;
this.swiper2.slideTo(i, 10, false);
} else {
document.body.style.overflow = ""; //出现滚动条
document.removeEventListener("touchmove", preD, { passive: false });
}
}
},
data() {
return {
swiperOption2: {
pagination: {
el: ".swiper-pagination2",
type: "fraction"
}
}
};
},
methods: {
hideFullFn() {
this.$emit("hideFullFn");
}
}
};
.full-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.9);
img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 50%;
object-fit: contain;
transform: translateY(-50%);
}
.swiper-pagination2 {
position: absolute;
left: auto;
right: 22px;
bottom: 60px;
padding: 5px 5px;
width: 72px;
border-radius: 20px;
background: rgba(153, 155, 164, 0.5);
font-size: 22px;
text-align: center;
color: #fff;
box-sizing: content-box;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
}