当我的模式打开时，如何更改 body 的样式？

Question

如何更改 body{overflow:hidden} 当我的模式打开时？

例如，它将是我的模式，当它打开时，我想应用这种样式 body{overflow:hidden}

<div  v-if="dialogFoundation">

我正在使用 vuejs3，我正在使用 setup(){...}

Answer 1

最佳性能是使用 javascript plain。您可以在模态触发元素顶部添加 Eventlistener。在我的示例中，我使用了一个按钮。如果它触发了，那么您可以使用 classList 并为正文分配一个 class。在我的示例中 .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>

Answer 2

您可以在 Vue.js 中使用 watchers 来解决这个问题。当变量改变时，你可以检查它是否为真，如果为真，则将 body 的溢出更改为隐藏。

{
    watch: {
         dialogFoundation(dialogFoundation) {
             document.body.style.overflow = dialogFoundation ? "hidden" : "auto"
         }
    }
}

但我认为这不是好的解决方案。您可以将此样式设置为您的应用程序元素

#app {
    width: 100%;
    height: 100%;
    overflow: auto;
}

并且您可以使用 Vue 指令更改应用元素的样式。

Answer 3

<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

当我的模式打开时，如何更改 body 的样式？

How can i change style of the body when my modal it will be open?

vue.js

vuejs3

Vue 版本

香草 JS