当我的模态打开时，我如何更改主体｛overflow：hidden｝？
例如，它将是我的模态，当它打开时，我想应用这种样式的body｛overflow：hidden｝
<div v-if="dialogFoundation">
我正在使用vuejs3，我正在使用setup((｛…｝
最好的性能是使用javascript纯文本。您可以将Eventlistener添加到模式触发器Element的顶部。在我的例子中，我使用了一个按钮。如果它被触发，那么您可以使用classList并为主体分配一个类。在我的示例.dark。
Vue版本
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<h1>{{message}}</h1>
<p></p>
<button @click="doSomething">Modal</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to Vue!'
};
},
methods: {
doSomething() {
const b = document.querySelector('body');
b.classList.toggle('dark');
}
}
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
a,
button {
color: #4fc08d;
}
button {
background: none;
border: solid 1px;
border-radius: 2em;
font: inherit;
padding: 0.75em 2em;
}
.dark {
background: black;
opacity: 0.4;
}
</style>香草JS
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
const b = document.querySelector('body');
b.classList.toggle('dark');
}).dark {
background: black;
opacity: 0.4;
}<body>
<div></div>
<button>click</button>
</body>您可以在Vue.js中使用观察程序来解决此问题。当变量发生变化时，您可以检查它是否为true，如果为true，则将主体的溢出更改为隐藏。
{
watch: {
dialogFoundation(dialogFoundation) {
document.body.style.overflow = dialogFoundation ? "hidden" : "auto"
}
}
}
但我认为这不是一个好的解决方案。您可以将此样式设置为您的应用程序元素
#app {
width: 100%;
height: 100%;
overflow: auto;
}
您可以使用Vue指令更改应用程序元素的样式。
<template>
<div id="app" :class="{ hidden: dialogFoundation }">
Long text....
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const dialogFoundation = ref(true);
return { dialogFoundation };
},
};
</script>
<style>
html,
body,
#app {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
overflow: auto;
}
#app.hidden {
overflow: hidden;
}
</style>
codesandbox中的代码-https://codesandbox.io/s/immutable-glitter-rwc2iy?file=/src/App.vue