zukucode
主にWEB関連の情報を技術メモとして発信しています。

Vue.js 汎用的な確認メッセージをモーダルダイアログで定義する

Vue.jsで汎用的な確認メッセージ(confirm)をモーダルダイアログで定義してプログラムから呼び出す方法を紹介します。

以下のソースではVuetifyを使用していますが、CSSフレームワークにかかわらず考え方は同じです。

Vue.js モーダルダイアログをプログラムから呼び出すで紹介した方法をもとに定義します。

コンポーネントの作成

まずはコンポーネントを作成します。

Vue.js モーダルダイアログをプログラムから呼び出すで定義したミックスインを使用しています。

メッセージはプロパティで受け取るようにしています。

また、OKとキャンセルのボタンを押したときのアクションをプロパティで定義するのがポイントです。

Confirm.vue
<template>
  <v-dialog v-model="show" :max-width="400">
    <v-card>
      <v-card-title class="error white--text" primary-title>
        確認メッセージ
      </v-card-title>
      <v-card-text class="pa-4">
        <p>{{ message }}</p>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="ok">
          OK
        </v-btn>
        <v-btn @click="cancel">
          キャンセル
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style lang="scss" scoped></style>

<script>
import programmatic from './programmatic';

export default {
  mixins: [programmatic],
  props: {
    message: {
      type: String,
      required: true,
    },
    okAction: {
      type: Function,
      required: true,
    },
    cancelAction: {
      type: Function,
      required: true,
    },
  },
  methods: {
    ok() {
      this.okAction();
      this.close();
    },
    cancel() {
      this.cancelAction();
      this.close();
    },
  },
};
</script>

$confirmファンクションを作成

確認メッセージを表示したあとは次の処理に進まないように、Promiseを返すファンクションとして定義します。

OKボタンクリック時はtrue、キャンセルボタンクリック時はfalseを返却するようにします。

import Confirm from 'Confirm.vue';

async $confirm(message) {
  return new Promise((resolve) => {
    const VM = Vue.extend(Confirm);
    new VM({
      parent: this,
      propsData: {
        message,
        okAction: () => resolve(true),
        cancelAction: () => resolve(false),
      },
    });
  }).catch((err) => {
    throw err;
  });
},

呼び出し

以下のように定義します。

呼び出しボタンをクリックすると確認メッセージが表示されることが確認できます。

asyncawaitを使用することにより、コールバックなどを使用せずにシンプルに確認ダイアログの処理を行えます。

<template>
  <v-btn @click="call">
    呼び出し
  </v-btn>
</template>

<script>
export default {
  methods: {
    async call() {
      const result = await this.$confirm('よろしいですか?');
      if (result === true) {
        console.log('OK');
      } else {
        console.log('キャンセル')
      }
    }
  }
}
</script>


関連記事