Vue2 × Vuetify でポップアップ画面を実装してみた

はじめに

Vue.jsのフレームワークであるVuetifyを用いて、ホームページに使うようなポップアップを実装してみました。
大まかな流れは以下のとおりです．

1. ボタンの配置
2. ポップアップ画面の配置
3. ボタンクリックでポップアップ画面が表示されるようにする

開発環境

• Windows 11
• Vue CLI 5.0.8
• Vue 2.7.14
• npm 6.14.14
• Node.js 14.17.5

実装

ボタンの配置

ボタンを押すと、ポップアップ画面が表示されるようにしたいので、まずはボタンを追加します。
今回は、以前の記事で作成したプロジェクトの「アカウント」ページに実装していきます。
同じように実装したい方は、こちらの記事を参考にしてください。

ここにボタンを追加します。

ボタンはv-btnタグを使えば追加することができます。

Account.vue

<template>
    <v-app> 
      <div>
        <p>アカウントのページです。</p>
        <v-btn
        outlined
        class="ma-1"
        color="blue"
        >
          詳細
        </v-btn>
      </div>
    </v-app>
</template>

outlinedで枠と文字のみに色を付けることができます。
class="ma-1"でmarginを少しつけます。
color="blue"で枠と文字の色をblueにします。

ここまで完成すると以下のようになります。

ポップアップ画面の配置

次に、ポップアップ画面を配置します。
v-dialogタグでポップアップ画面を作成することができます。
v-cardタグでカードっぽいデザインにすることができます。

Account.vue

<template>
    <v-app> 
      <div>
        <p>アカウントのページです。</p>
        <v-btn
        outlined
        class="ma-1"
        color="blue"
        >
          詳細
        </v-btn>
      </div>

      <div>
        <v-dialog 
        v-model="dialog" 
        width="400px"
        >
          <v-card
          width="400px"
          class="mx-auto"
          >
            <v-card-title>アカウントの詳細です。</v-card-title>
          </v-card>
        </v-dialog>
      </div>
    </v-app>
</template>

ただ、今のままではイベントを設定していないので、表示はそのままです。

ボタンクリックでポップアップ画面が表示されるようにする

次にイベントを作成して、ボタンとポップアップ画面を紐づけていきましょう。
dialogという変数がtrueの時はポップアップ画面を表示、falseの時は非表示にするコードを記述します。

以下3点です。

1. v-btnタグにはクリックしたときにdialogをtrueにする記述
2. b-dialogタグにはdialog変数と同期させる記述
3. scritのdataでdialogの初期値をfalseに設定する記述

Accoumt.vue

<template>
    <v-app> 
      <div>
        <p>アカウントのページです。</p>
        <v-btn
        outlined
        class="ma-1"
        color="blue"
        @click="dialog=true" <!--追加-->
        >
          詳細
        </v-btn>
      </div>

      <div>
        <v-dialog 
        v-model="dialog"  <!--追加-->
        width="400px"
        >
          <v-card
          width="400px"
          class="mx-auto"
          >
            <v-card-title>アカウントの詳細です。</v-card-title>
          </v-card>
        </v-dialog>
      </div>
    </v-app>
</template>

<!--以下、追加-->
<script>
export default {
    data: () => ({
      dialog:false,
    }),
}
</script>

これでボタンをクリックすると、以下のようなポップアップ画面が表示されます。
ポップアップ画面の外側をクリックすると閉じることができます。

まとめ

Vuetifyにはいろんなタグが用意されていて便利ですね。
今回はテスト用でしたが、デザインなどを改善し、実際の開発に生かしていきたいと思います！