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

Question

我有一个vue的组件,我希望在点击时在主体上切换一个类.

我怎样才能做到这一点？我是否只需要使用JS来定位主体并添加一个类？

还是有更多的vue方式？

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

Answer 1

我想我通过使用观察者找到了一种优雅的"vue方式".通过设置数据属性即活动并在点击时切换此项.您可以添加一个观察程序,以检查它是真还是假,基于此向主体添加类或某些样式.

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

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

Answer 2

希望这可以帮助：

在 <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 3

我认为与身体的反应性结合通常是不受欢迎的。请参阅Vue 团队成员的论坛回复以及他链接到的文章。这让我觉得没有一种“vue 方式”可以在单击组件时更改主体的类。

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