Question

我的一个页面中有一个模态，当我打开模态时，我想在主体上添加一个“主动”类，所以我可以隐藏身体溢出（没有滚动）。当我从一个组件点击时，有没有办法在body标签上设置类？我无法弄明白......

我使用路线

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

提前谢谢

Answer 1

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

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

注意：在这种情况下，您不会在您的身体标签上添加该课程（因为您无法在身体上安装Vue），但您可以将其添加到您的身体root div有类似的结果。

＆＃13;

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;
    });
  },
})

＆＃13;

.active {
  background: grey;
}

＆＃13;

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

＆＃13;

Answer 2

这应该有帮助

document.body.className += 'active'

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

2 个答案: