首页vue3的项目中遮罩层去掉滚动条

vue3的项目中遮罩层去掉滚动条

时间: 2023-07-28 13:29:51 浏览: 135

在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的项目中去掉遮罩层下方的滚动条了。

阅读全文