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;
});
},呼び出し
以下のように定義します。
呼び出しボタンをクリックすると確認メッセージが表示されることが確認できます。
asyncとawaitを使用することにより、コールバックなどを使用せずにシンプルに確認ダイアログの処理を行えます。
<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>