【v-scroll-lock】モーダル実装時の背景スクロールを制御

備忘録までに。
こちらの記事から引用。
https://www.vuescript.com/prevent-body-scroll/

インストール

npm

npm install v-scroll-lock --save

yarn

yarn add v-scroll-lock

CDN

main.js

<script src="https://cdn.jsdelivr.net/npm/v-scroll-lock@1.0.1/dist/v-scroll-lock.min.js"></script>

取り込み

main.js

import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock)

index.html

<template>
  <div class="modal" v-if="open">
    <button @click="closeModal">X</button>
    <div class="modal-content" v-scroll-lock="open">
      <p>Modal Content Here</p>
    </div>
  </div>
</template>

main.js

export default {
  name: 'Modal',
  data() {
    return {
      open: false,
    }
  },
  methods: {
    openModal() {
      this.open = true
    },
    closeModal() {
      this.open = false
    },
  },
}

概要

v-scroll-lockは、インストールされた時点では、body全体のスクロールがロックされてしまう。
dataに、open: falseを追加。ここの命名は任意。
そうすることによって、通常時（モーダル非表示時）にはスクロールが可能になる。

methodsに、openModalやcloseModal（命名は任意）を設置し、
openModalにはthis.open = trueを設置、
これでv-on:click="openModal"が呼び出されたときに、背景スクロールは停止。
body要素には、style="overflow: hidden"が追加されている。

closeModalが呼び出されたら、this.open = falseが発動し、通常時のスクロールは可能となる。