Как добавить / удалить класс в теге body при открытии / закрытии модального в vuejs

Question

У меня есть модал на одной из моих страниц, и я хочу добавить класс «активный» в тело, когда открываю модал, чтобы я мог скрыть переполнение тела (без прокрутки).Есть ли способ переключить класс в теге 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>

Answer 2

Это должно помочь

document.body.className += 'active'