컴포넌트를클릭하면클래스를바디에추가하시겠습니까?

컴포넌트를클릭하면클래스를바디에추가하시겠습니까?

vue에 컴포넌트가 있습니다.클릭 시 본문의 클래스를 전환하고 싶습니다.

이거 어떻게 해?본문을 타겟으로 하고 클래스를 추가하려면 JS를 사용해야 합니까?

아니면 vue way가 더 있나요?

컨텍스트의 경우 오버레이 메뉴에 대한 스크롤을 방지하기 위해 본문에 스크롤하지 않는 클래스를 추가해야 합니다.

워처를 사용하여 우아한 "vue way"를 찾은 것 같아요.데이터 속성을 활성화하고 클릭 시 전환합니다.워처를 추가하여 본문에 클래스나 스타일링을 추가하여 참인지 거짓인지 확인할 수 있습니다.

사이드 패널이 열려 있을 때 본체의 스크롤을 비활성화하기 위해 필요했습니다.나는 데이터 대신 소품을 사용하지만 이것은 문제가 되지 않을 것이다.

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

이것이 도움이 되기를 바랍니다.

인<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');
}

도움이 되시길 바랍니다.

• vue-body-class NPM
• vue-body-class GitHub

vue-router를 사용하여 페이지 본문 클래스를 제어할 수 있습니다.비슷한 문제에 직면했을 때 이 글을 썼다.

나는 신체에 대한 반응적 결합은 일반적으로 눈살을 찌푸리게 한다고 생각한다.Vue 팀원의 포럼 답변과 그가 링크한 기사를 참조하십시오.따라서 컴포넌트를 클릭했을 때 본문의 클래스를 변경할 수 있는 "vue way"가 없다고 생각합니다.

그래서 말씀하신 것처럼 JS로 몸을 공략하는 것이 가장 좋은 선택이라고 생각합니다.

메서드 내에서도 같은 어프로치를 사용합니다(다른 곳에서 setBodyClass() 함수를 호출합니다.그 때문에, 이 함수는 독자적인 함수로 랩 되어 있습니다).

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

이것도 시도해 보세요.

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

언급URL : https://stackoverflow.com/questions/42906996/add-a-class-to-body-when-component-is-clicked