モーダルコンポーネントを作る
<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クラスを付与することができ背景をスクロールさせなくできます。