web-dev-qa-db-ja.com

コンポーネントがクリックされたときにクラスを本体に追加しますか？

私はvueにコンポーネントを持っています。クリックすると、本体のクラスを切り替えます。

これどうやってするの？本体をターゲットにしてクラスを追加するには、JSを使用する必要がありますか？

または、vue wayの詳細はありますか？

コンテキストでは、オーバーレイメニューのスクロールを防ぐために、本文にno scrollクラスを追加する必要があります。

vue.jsvuejs2vue-component
11
panthro

身体への反応的な結合は一般的に嫌われていると思います。これを見る Vueチームメンバー）によるフォーラムの応答 および 彼がリンクしている記事 を参照してください。コンポーネントがクリックされたときにボディのクラスを変更します。

ですから、あなたが言うように、JSで身体をターゲットにすることが最良の選択肢だと思います。

0
thanksd

ウォッチャーを使って、エレガントな「vue way」を見つけたと思います。データ属性を設定することで、つまりアクティブにして、クリック時にこれを切り替えます。これに基づいてtrueまたはfalseであるかどうかを確認するウォッチャーを追加して、クラスまたは本文にいくつかのスタイルを追加できます。

サイドパネルが開いているときに本体のスクロールを無効にするためにこれが必要でした。データの代わりに小道具を使用していますが、これは問題になりません。

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

お役に立てれば：

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

これがお役に立てば幸いです。

それはvue-routerであなたのページ本体クラスを制御することを可能にします。同様の問題に直面したときにこれを書いた。

3
Nikolay Antonov

メソッド内で同様のアプローチを使用します（他の場所からもsetBodyClass（）関数を呼び出します。そのため、独自の関数でラップされています）。

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

これも試すことができます

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