vue手写遮罩层弹窗,实现点击遮罩层和关闭按钮关闭弹窗
父组件<template><section><div class="ruleBtn"@click="handleClick($event)">点击按钮</div><RuleModalv-if="ruleModalVisible"ref="ruleModal":modalConfig="modalConfig"@close="closeRuleM
·
父组件
<template>
<section>
<div class="ruleBtn" @click="handleClick($event)">点击按钮</div>
<RuleModal
v-if="ruleModalVisible"
ref="ruleModal"
:modalConfig="modalConfig"
@close="closeRuleModal"
/>
</section>
</template>
<script lang="ts">
import {Vue, Component, Prop, Mixins, Watch} from 'vue-property-decorator'
import RuleModal from './components/RuleModal.vue'
let bodyScrollTop = 0;
//@ts-ignore
@Component({
components:{
RuleModal
}
})
export default class extends xxx {
@Prop({
default: () => ({
modalTitle: '入口规则',
})
})
modalConfig!:IModalConfig;
ruleModalVisible = false; // 规则弹窗
解决弹窗出现后,滚动鼠标遮罩层下还能滑动的问题:
方法一:比较完善
// 监听弹窗是否出现
get isExistModal() {
return this.ruleModalVisible;
}
@Watch('isExistModal')
// 底部弹窗出来后hack掉body的滚动,避免滚动穿透(解决弹窗出现后,滚动鼠标遮罩层下还能滑动的问题)
hackBodyScroll(value: boolean = false) {
if (value) {
// 展示出新的
bodyScrollTop =
window.pageYOffset ||
(document as any).documentElement.scrollTop ||
window.scrollY ||
0;
document.body.style.top = `-${bodyScrollTop}px`;
document.body.style.position = "fixed";
document.body.style.width = "100%";
document.body.style.height = "100%";
} else {
document.body.style.display = "block";
document.body.style.position = "static";
document.body.style.top = "0";
(document as any).documentElement.scrollTop = bodyScrollTop;
document.body.scrollTop = bodyScrollTop;
}
}
方法二:直接在开关弹窗时通过控制document.body.style.overflow的状态来实现,不过有人说移动端就有问题,我是没有遇到,视情况而定
// 点击打开弹窗
handleClick(this: any, event: any) {
this.ruleModalVisible = true;
// document.body.style.overflow = 'hidden'; // 开弹窗时将overflow = "hidden"
}
// 关闭弹窗
closeRuleModal(event:any) {
this.ruleModalVisible = false;
// document.body.style.overflow = 'visible';
}
}
</script>
子组件:弹窗组件
<template>
<div class="rule-modal" @click="close($event)">
<!-- <div class="modal-wrap"> -->
<div class="main-area" @click="stopClose($event)">
{{modalTitle}}
</div>
<!-- 关闭按钮 -->
<img class="close-btn" src="//p0.meituan.net/scarlett/505b32dc0700840a35050bdfc9afc4b4608.png" />
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props:{
modalConfig: {
type: Object,
default() {
return {
modalTitle: '活动规则',
}
}
}
},
methods:{
// 实现点击弹窗遮罩层和关闭按钮emit关闭
close(this: any, event: any) {
this.$emit('close', event);
},
// 实现点击弹窗内容自身阻止冒泡,以防弹窗被关闭
stopClose(e: any) {
e.stopPropagation();
}
}
})
</script>
css样式
// 关键是rule-modal的样式,其他根据项目需求写
.rule-modal {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
.modal-wrap {
width: 6.2rem;
display: flex;
flex-direction: column;
align-items: center;
background-repeat: no-repeat;
background-size: 100%;
height: 100%;
justify-content: center;
.main-area{}
// 关闭按钮
.close-btn {
width: 0.8rem;
height: 0.8rem;
margin-top: 0.4rem;
}
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)