feat(遮罩层组件): 设置打开时关闭页面滑动的功能,仅保留遮罩层自己的滑动功能,解决了在遮罩层空白区域滑动导致页面滑动的bug
This commit is contained in:
parent
5c75c98734
commit
4e0589a41b
@ -18,12 +18,31 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
maskLayerShow: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
// 监听遮罩层显示状态,控制背景页面滚动
|
||||
watch(
|
||||
() => props.maskLayerShow,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
// 禁用背景页面滚动
|
||||
document.body.style.overflow = 'hidden'
|
||||
document.body.style.touchAction = 'none'
|
||||
} else {
|
||||
// 恢复背景页面滚动
|
||||
document.body.style.overflow = ''
|
||||
document.body.style.touchAction = ''
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -541,7 +541,7 @@
|
||||
<!-- 弹窗遮罩层 -->
|
||||
<maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
|
||||
<!-- help弹窗 -->
|
||||
<div style="margin: 20% 0" @click.stop>
|
||||
<div style="margin: 10vh 0 5vh" @click.stop>
|
||||
<itemCenter
|
||||
:imgUrl="imageUrl(getImgName('helpBg'))"
|
||||
:contentStyle="`inset: 15% 4% 3%;overflow-y: auto;display:block;`"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user