在
Vue3的项目
中，可以通过以下步骤去掉
遮罩层下方的
滚动条：
1. 在
遮罩层的样式
中，设置`position: fixed`和`overflow-y: scroll`，例如：
```css
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
overflow-y: scroll;
}
```
2. 在需要显示
遮罩层的组件
中，使用
Vue的`computed`属性计算出一个布尔值，用来判断是否需要显示
遮罩层，例如：
```html
<template>
<div>
<button @click="showMask = true">显示
遮罩层</button>
<div v-if="showMask" class="mask"></div>
</div>
</template>
<script>
export default {
data() {
return {
showMask: false,
};
},
computed: {
bodyStyle() {
return this.showMask ? { overflow: 'hidden' } : { overflow: 'auto' };
},
},
};
</script>
<style>
body {
height: 100%;
}
</style>
```
3. 在组件的`<body>`元素上绑定样式，根据是否显示
遮罩层来决定是否隐藏
滚动条，例如：
```html
<template>
<div>
<button @click="showMask = true">显示
遮罩层</button>
<div v-if="showMask" class="mask"></div>
</div>
</template>
<script>
export default {
data() {
return {
showMask: false,
};
},
computed: {
bodyStyle() {
return this.showMask ? { overflow: 'hidden' } : { overflow: 'auto' };
},
},
mounted() {
Object.assign(document.body.style, this.bodyStyle);
},
updated() {
Object.assign(document.body.style, this.bodyStyle);
},
};
</script>
<style>
body {
height: 100%;
}
</style>
```
这样就可以在
Vue3的项目
中去掉
遮罩层下方的
滚动条了。
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
