单击组件时向正文添加 class？

Question

我在 vue 中有一个组件，我希望在单击时在主体上切换 class。

我该怎么做？我只需要使用 JS 来定位正文并添加一个 class 吗？

或者有更多的vue方法吗？

对于上下文，我需要向主体添加无滚动 class 以防止滚动覆盖菜单。

Answer 1

我认为 body 的响应式绑定通常不受欢迎。看到这个 forum response by Vue team member and the article he links to。这让我觉得在单击组件时没有 "vue way" 来更改 body 的 class。

所以我认为，就像你说的，用 JS 定位 body 是最好的选择。

Answer 2

希望对您有所帮助：

它允许使用 vue-router 控制您的页面主体类。遇到类似问题时写的。

Answer 3

我想我通过使用观察者找到了一种优雅的“vue 方式”。通过设置数据属性，即 active 并在单击时切换它。您可以添加一个观察者来检查它是真还是假基于此添加 class 或一些样式到 body.

我需要这个来在侧面板打开时禁用 body 上的滚动。我使用道具而不是数据，但这应该无关紧要。

watch: {
  // whenever active changes, this function will run
  active: function () {
    document.body.style.overflow = this.active ? 'hidden' : ''
  }
}

Answer 4

希望这对您有所帮助：

在<template>

<button @click="toggleBodyClass('addClass', 'noScroll')">Add Class</button>
<button @click="toggleBodyClass('removeClass', 'noScroll')">Remove Class</button>

在<script>

methods: {
  toggleBodyClass(addRemoveClass, className) {
    const el = document.body;

    if (addRemoveClass === 'addClass') {
      el.classList.add(className);
    } else {
      el.classList.remove(className);
    }
  },
},

// Just in case you like to do it when page or component is mounted or destroyed.
mounted() {
  this.toggleBodyClass('addClass', 'yourClassName');
},
destroyed() {
  this.toggleBodyClass('removeClass', 'yourClassName');
}

Answer 5

我在一个方法中使用了类似的方法（我也从其他地方调用了 setBodyClass() 函数，这就是为什么它被包装在自己的函数中的原因：

methods: {
  toggleMenu() {
    this.showMenu = !this.showMenu
    this.setBodyClass()
  },
  setBodyClass() {
    var body = document.body
    body.classList.toggle('open')
  }
}

Answer 6

你也可以试试这个

setActive() {
  this.active = !this.active;
  let sitebody = document.body;
  this.active ? sitebody.classList.add("menu-in") : sitebody.classList.remove("menu-in");
}

单击组件时向正文添加 class？

Add a class to body when component is clicked?

vue.js

vue-component

vuejs2