如何为 Vue 组件点击时为 Body 添加 Class？深入浅出的指南

2024-03-19 16:34:14

在 Vue 组件点击时为 Body 添加 Class：深入浅出的指南

简介

在 Vue 中，我们有时需要在点击某个组件时为 body 元素添加一个 class。本文将提供三种方法来实现这一目标：使用 JavaScript、Vue 指令和 Vue 事件总线。

方法 1：使用 JavaScript

最直接的方法是使用 JavaScript 直接访问 body 元素。我们可以使用 document.body 来获取 body 元素，然后使用 classList.add() 方法添加 class。

const component = {
  methods: {
    handleClick() {
      document.body.classList.add('no-scroll');
    },
  },
};

方法 2：使用 Vue 指令

Vue 提供了一个名为 body-scroll-lock 的指令，它可以在组件激活时锁定 body 的滚动。我们可以通过在组件模板中使用此指令来实现相同的目标：

<template>
  <div @click="toggleBodyScroll">...</div>
</template>

<script>
import { bodyScrollLock } from 'body-scroll-lock';

export default {
  methods: {
    toggleBodyScroll() {
      bodyScrollLock.toggle();
    },
  },
};
</script>

方法 3：使用 Vue 事件总线

Vue 事件总线是一种在组件之间传递事件的机制。我们可以使用事件总线来从组件发出一个事件，然后在另一个组件中监听该事件并添加 class：

// 组件 A
const componentA = {
  methods: {
    handleClick() {
      this.$root.$emit('toggle-body-scroll');
    },
  },
};

// 组件 B
const componentB = {
  methods: {
    handleToggleBodyScroll() {
      document.body.classList.toggle('no-scroll');
    },
  },
  mounted() {
    this.$root.$on('toggle-body-scroll', this.handleToggleBodyScroll);
  },
  beforeDestroy() {
    this.$root.$off('toggle-body-scroll', this.handleToggleBodyScroll);
  },
};