【Vuetify】v-dialogでウィンドウ外をクリックした際のイベント処理を行う方法

はじめに

v-dialogコンポーネントを使用してモーダルダイアログを表示する場合、ダイアログ外をクリックした際に特定の処理を実行したい場合があります。Vuetifyでは、@click:outsideイベントを使用することで、この動作を簡単に実装できます。

@click:outsideイベントの使い方

@click:outsideイベントは、ダイアログの外側がクリックされたときに発火します。このイベントを使用して、ダイアログ外クリック時に任意の処理を実行できます。例えば、アラートを表示する、データをリセットする、または特定の関数を呼び出すといった処理が考えられます。

実装例

以下は、v-dialogで外部をクリックしたときにアラートを表示するシンプルな例です。

<template>
  <v-container>
    <!-- ダイアログをトリガーするボタン -->
    <v-btn @click="dialog = true">ダイアログを開く</v-btn>

    <!-- ダイアログの定義 -->
    <v-dialog v-model="dialog" @click:outside="handleOutsideClick">
      <v-card>
        <v-card-title class="headline">ダイアログのタイトル</v-card-title>
        <v-card-text>ダイアログのコンテンツ</v-card-text>
        <v-card-actions>
          <v-btn text @click="dialog = false">閉じる</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
    };
  },
  methods: {
    handleOutsideClick() {
      alert('ダイアログの外をクリックしました！');
      // ここに任意の処理を追加
    },
  },
};
</script>

解説

v-dialogコンポーネントの@click:outsideにhandleOutsideClickメソッドを紐付けています。
handleOutsideClickメソッドでは、アラートを表示していますが、ここで任意の処理を実装できます。

応用例

@click:outsideを使って、ダイアログ外部をクリックしたときにフォームをリセットするなどの応用も可能です。

<template>
  <v-container>
    <v-btn @click="dialog = true">フォーム付きダイアログを開く</v-btn>

    <v-dialog v-model="dialog" @click:outside="resetForm">
      <v-card>
        <v-card-title>入力フォーム</v-card-title>
        <v-card-text>
          <v-text-field v-model="form.name" label="名前" />
        </v-card-text>
        <v-card-actions>
          <v-btn text @click="dialog = false">閉じる</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
      form: {
        name: '',
      },
    };
  },
  methods: {
    resetForm() {
      this.form.name = '';
      console.log('フォームをリセットしました');
    },
  },
};
</script>

この例では、ダイアログの外部をクリックすると、resetFormメソッドが呼ばれ、フォームの内容がリセットされます。

まとめ

Vuetifyのv-dialogでウィンドウ外をクリックしたときのイベント処理には、@click:outsideイベントを使用します。このイベントを利用することで、ダイアログ外クリック時の動作を自由に制御することができ、アプリケーションのユーザーインターフェースを柔軟に設計できます。

参考

https://vuetifyjs.com/ja/api/v-overlay/#events-click:outside