Nuxtでモーダル実装時に背景がスクロールできてしまう時の対処法

モーダルコンポーネントを作る

<template>
  <transition name="modal">
    <div class="modal-mask" @click="closeModal">
      <div class="modal-wrapper">
        <div class="modal-container" @click.stop>
          <div class="modal-contents">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "TheModal",
  methods: {
    closeModal() {
      this.$emit("closeModal");
    }
  }
};
</script>

<style scoped>
省略
</style>

ソースコードはこちら

pageコンポーネントのtemplateで以下のように呼び出し

<TheModal v-show="showModal" @closeModal="showModal = false">
 モーダル
</TheModal>

結果

しかし、このままだとモーダルを表示した状態でも後をスクロールすることができてしまう。

解決方法

モーダルが表示されているときにbodyタグに以下のクラスを付与する。

modal-body {
  overflow-y: hidden;
  position: fixed;
}

bodyにクラスを付与するためにグローバルに読み込まれているCSSなどに上のクラスを定義しておく。

ページコンポーネントのhead()に以下を設定する

<script>
import Logo from "~/components/Logo";
import TheModal from "~/components/TheModal";

export default {
  components: {
    Logo,
    TheModal
  },
  data() {
    return {
      showModal: false
    };
  }
  //　↓追加↓
  head () {
    return {
      bodyAttrs: {
        class: this.showModal ? 'modal-body' : ''
      }
    }
  },
};
</script>

this.showModalがtrueの時(モーダルが表示されている)にbodyタグに
modal-bodyクラスを付与することができ背景をスクロールさせなくできます。