vue.js - 在 vuejs 中打开/关闭模式时如何在 body 标签上添加/删除类

Question

我的一个页面中有一个模式，我想在打开模式时在主体上添加一个“active”类，这样我就可以隐藏主体溢出(无滚动)。 当我从一个组件单击时，有没有一种方法可以在 body 标记上切换类？我想不通...

我使用路线

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

提前致谢

Answer 1

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

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

注意: 在这种情况下，您不会将类添加到 body 标记上(因为您无法将 Vue 安装到 body 上)，但您可以将其添加到根 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>