在vuejs中打开/关闭模式时如何在body标签上添加/删除类答案

【问题标题】：How to add/remove class on body tag when open/close modal in vuejs在vuejs中打开/关闭模式时如何在body标签上添加/删除类
【发布时间】：2018-10-23 22:22:17
【问题描述】：

我的一个页面中有一个模态，当我打开模态时，我想在正文上添加一个“活动”类，这样我就可以隐藏正文溢出（无滚动）。当我从一个组件中单击时，有没有办法在 body 标签上切换一个类？我想不通...

我使用路线

<template>
    <div id="app">
        <Header />
        <router-view/>
        <Footer />
    </div>
</template>

提前谢谢

【问题讨论】：

stackoverflow.com/a/17457651/5599288

标签： vue.js vuejs2

【解决方案1】：

在 Vue 中正确的做法是在组件之间进行通信，在这种情况下它可能不是简单的父子通信，因此您可能需要创建一个事件总线。

通过使用这种方法，模态代码对您应用程序的其余部分的影响最小，它只调度您可以从任何其他组件订阅的事件。

注意：在这种情况下，你不会在你的 body 标签上添加类（因为你不能在 body 上挂载 Vue），但你可以将它添加到你的根 div 中类似的结果。

const eventBus = new Vue();

Vue.component('modal', {
  props: ['isOpen'],
  template: `
  	<div class="modal" v-if="isOpen">This is a modal</div>
  `,
});

Vue.component('wrapper', {
  template: `
    <div>
      <modal :isOpen="isModalOpen"></modal>
      <button @click="toggleModal">toggle modal</button>
    </div>
  `,
  data() {
    return {
      isModalOpen: false,
    }
  },
  methods: {
    toggleModal() {
      this.isModalOpen = !this.isModalOpen;
      eventBus.$emit('toggleModal', this.isModalOpen);
    }
  }
});

new Vue({
  el: "#app",
  data: {
    active: false,
  },
  created() {
    eventBus.$on('toggleModal', (isModalOpen) => {
      this.active = isModalOpen;
    });
  },
})

.active {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app" :class="{active}">
  <wrapper></wrapper>
</div>

【讨论】：

【解决方案2】：

这应该会有所帮助

document.body.className += 'active'

【讨论】：