Vue.js Vuetifyを使い簡単にモーダルを作成する方法

はじめに

Vue.jsに限らず、モーダルの作成には少し手間がかかると思います。

しかし、Vuetifyを導入することでモーダルを楽に作れるので、備忘録として残します。

Vuetifyのインストールはこちら

Vuetifyを始めましょう — Vuetify

 広告：フロントエンドエンジニアになりたい人の Webプログラミング入門

コード

<template>

　<div class="text-center">

　　<v-btn @click="overlay = !overlay">

　　　モーダルオープン

　　</v-btn>

　<v-overlay :value="overlay">

　　<div class="modal-wrapper" style="background: #fff">

　　　<p style="color:#111;">モーダルです</p>

　　　<v-btn color="error" @click="overlay = !overlay ">閉じる</v-btn>

　　</div>

　</v-overlay>

　</div>

</template>

<script>

export default {

　data: () => ({

　　overlay: false,

　　})

　}

</script>

 

 

解説

<v-overlay :value="overlay"></v-overlay>

こちらが言葉の通りオーバーレイを表示する要素です。

data()内にあるoverlay: false;の時非表示、trueの時に表示します。

 上記のようにHTMLの要素を作成するので、CSSでのカスタマイズも可能。

この要素の中にモーダルで表示したい内容を記述することで、モーダルを実装します。

<v-btn color="error” @click="overlay = !overlay "></btn>

v-btnでボタンを作成しています。

@clickでクリックイベントを指定し、overlay = !overlayでTrue,falseを切り替え表示、非表示を実装します。

参考サイト

https://vuetifyjs.com/ja/components/overlays/