Vue.js中打开/关闭模态框时如何为body标签添加/移除类

当然可以呀！在Vue组件里通过点击事件来给body标签切换类完全可行，我给你两种实用的方案，帮你轻松实现禁止body滚动的需求：

方案一：直接在组件内操作DOM #

这是最直接的方式，在打开/关闭模态框的方法里，直接操作document.body的类列表就行。举个具体的例子，假设你的模态框组件是这样的：

<template>
  <div>
    <button @click="openModal">打开模态框</button>
    <div class="modal" v-if="isModalOpen">
      <!-- 这里放你的模态框内容 -->
      <button @click="closeModal">关闭模态框</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
      // 给body添加active类
      document.body.classList.add('active');
    },
    closeModal() {
      this.isModalOpen = false;
      // 移除body的active类
      document.body.classList.remove('active');
    }
  },
  // 别忘了组件销毁时做清理：如果模态框还开着，要移除body的类
  beforeDestroy() {
    if (this.isModalOpen) {
      document.body.classList.remove('active');
    }
  }
};
</script>

<style>
/* 实现溢出隐藏的样式 */
body.active {
  overflow: hidden;
}
</style>

这种方法上手快，适合单个模态框的场景。需要注意的是组件销毁时的清理逻辑——如果用户在模态框打开的状态下切换路由，必须把body的类移除，不然其他页面也会被禁止滚动。

方案二：使用自定义指令（更优雅、可复用） #

如果你的项目里有多个模态框都需要这个功能，自定义指令会更省心，能避免重复写DOM操作代码。

首先在项目的main.js里注册一个全局指令：

Vue.directive('modal-lock', {
  // 指令第一次绑定到元素时触发
  inserted(el, binding) {
    this.toggleBodyLock(binding.value);
  },
  // 指令绑定的值更新时触发
  update(el, binding) {
    if (binding.value !== binding.oldValue) {
      this.toggleBodyLock(binding.value);
    }
  },
  // 指令解绑时触发（比如组件销毁）
  unbind() {
    document.body.classList.remove('active');
  },
  // 封装切换类的逻辑
  toggleBodyLock(shouldLock) {
    if (shouldLock) {
      document.body.classList.add('active');
    } else {
      document.body.classList.remove('active');
    }
  }
});

然后在你的模态框组件里，只要把指令绑定到模态框元素上，值和模态框的显示状态挂钩就行：

<template>
  <div>
    <button @click="isModalOpen = true">打开模态框</button>
    <div 
      class="modal" 
      v-if="isModalOpen"
      v-modal-lock="isModalOpen"
    >
      <!-- 模态框内容 -->
      <button @click="isModalOpen = false">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false
    };
  }
};
</script>

这样一来，只要控制isModalOpen的值，指令就会自动帮你处理body的类，不用每个组件都写重复的逻辑，更符合Vue的组件化思想。

两种方案都能解决你的问题，选哪种看你项目的实际需求就好～

内容的提问来源于stack exchange，提问作者Luna84