Question

我在vue中有一个组件，我希望在点击时切换正文上的一个类。

我该怎么做？我是否只需要使用JS来定位主体并添加一个类？

还是有更多的vue方式？

对于上下文，我需要向正文添加一个无滚动类，以防止滚动覆盖菜单。

Answer 1

我认为通过使用观察者我发现了一种优雅的“vue方式”。通过设置数据属性即活动并在点击时切换此项。你可以添加一个观察者来检查它是真还是假，因为这会为身体添加一个类或一些样式。

当侧面板打开时，我需要这个来禁用身体上的滚动。我使用道具代替数据，但这不重要。

function MYTHEMENAME_preprocess_html(&$variables){
  $theme_path = base_path() . path_to_theme();
  drupal_add_css($theme_path.'/assets/css/style.css');
}

Answer 2

我希望你会发现这有用：

它允许使用vue-router控制页面体类。在遇到类似的问题时写了这个。

Answer 3

希望这会有所帮助：

在"AttributeError("'NoneType' object has no attribute 'text'",)

<template>

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

<script>

Answer 4

我认为对身体的反应性结合通常是不受欢迎的。见forum response by Vue team member和the article he links to。这让我觉得在点击组件时没有“vue方式”来改变主体的类。

所以我认为，就像你说的那样，用JS瞄准身体是最好的选择。

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

单击组件时向主体添加类？

6 个答案: