Vue.jsでカスタム確認ダイアログを作成してみた
はじめに
Webアプリケーションの開発において、しばしば確認ダイアログが必要になります。JavaScriptのconfirm()関数はその一例で、ブラウザが提供する簡易的な確認ダイアログを表示する関数です。しかし、デザインを自分で調整できないという問題があります。ブラウザ間で一貫した見た目を保つことは難しく、オリジナルのデザインに合わせることもできません。
さらに、Vueなどのフレームワークを用いてアプリケーションを開発している場合、一般的なバケツリレー型のダイアログの実装方式は、管理が煩雑になることがあります。
そこで、今回はVueとComposition APIを使用して、スタイルを自由に調整でき、かつconfirm()関数のように簡単に呼び出せる確認ダイアログを作成してみましょう。アプリケーション全体で統一した見た目の確認ダイアログの実現が可能になります。
環境
- Vue.js 2.x
- vue/composition-api
確認ダイアログの作成
最初に、確認ダイアログとして使用するVueコンポーネントを作成します。このコンポーネントは、ボタンのクリックイベントをハンドリングするメソッドを持ちます。
<template>
<div class="dialog-mask">
<div class="dialog">
<p>{{ message }}</p>
<button @click="handleOk">OK</button>
<button @click="handleCancel">Cancel</button>
</div>
</div>
</template>
<script lang="ts">
import { ref, defineComponent } from '@vue/composition-api';
export default defineComponent({
name: 'ConfirmDialog',
props: {
message: {
type: String,
required: true,
},
},
setup(_, context) {
const handleOk = () => {
context.root.$emit('confirm');
};
const handleCancel = () => {
context.root.$emit('cancel');
};
return {
handleOk,
handleCancel,
};
},
});
</script>
<style scoped>
.dialog-mask {
/* スタイルは省略 */
}
.dialog {
/* スタイルは省略 */
}
</style>
確認ダイアログを表示する関数
次に、上で作成した確認ダイアログを表示するための関数を作成します。ここでは、VueのVue.extendメソッドを使用して新しいVueインスタンスを生成します。Vue.extendメソッドはVueコンストラクタを拡張して再利用可能なコンポーネントを作成するためのものです。ここではConfirmDialogコンポーネントを再利用可能なものとして定義し、それをベースに新しいVueインスタンスを生成しています。
その後、$mountメソッドを使用してVueインスタンスをマウントします。$mountメソッドはVueインスタンスを手動でマウントするためのもので、これによりDOM内にインスタンスが関連付けられます。
そして、confirmイベントとcancelイベントのリスナーを登録します。これらのイベントが発生した場合、対応するハンドラーが呼び出され、確認ダイアログの結果がPromiseによって返されます。そして最後に、確認ダイアログが閉じられたら、それをDOMから削除します。
import Vue from 'vue';
import ConfirmDialog from './ConfirmDialog.vue';
export function showConfirmDialog(message: string): Promise<boolean> {
return new Promise((resolve) => {
const DialogConstructor = Vue.extend(ConfirmDialog);
const instance = new DialogConstructor({
propsData: {
message: message,
},
});
instance.$on('confirm', () => {
resolve(true);
document.body.removeChild(instance.$el);
});
instance.$on('cancel', () => {
resolve(false);
document.body.removeChild(instance.$el);
});
instance.$mount();
document.body.appendChild(instance.$el);
});
}
確認ダイアログの使用例
それでは、作成した確認ダイアログを使用する方法を見てみましょう。下記の例では、ボタンがクリックされた際にshowConfirmDialog関数を呼び出して確認ダイアログを表示しています。
import { showConfirmDialog } from './confirm';
async function onDeleteButtonClick() {
const isConfirmed = await showConfirmDialog('本当に削除しますか？');
if (isConfirmed) {
// ユーザーがOKをクリックした時の処理
console.log('削除されました');
} else {
// ユーザーがCancelをクリックした時の処理
console.log('削除がキャンセルされました');
}
}
まとめ
以上がVue.jsを使って自由にスタイルを調整できるカスタム確認ダイアログを作成する方法でした。ダイアログの表示を非同期で制御し、UI/UXの向上と共にコードの可読性も保つことができると思います。
今回紹介した方法は基本的なもので、さらに高度な機能やカスタマイズを追加することも可能なので、必要に応じてアップデートしていきたいと思います！
Discussion