Open3
Vueでモーダルを実装する
Kazuki Takahashi非常によく使うUIの割にプロジェクトごとに再実装することになるなど無駄を感じたので一度まとめたい
Kazuki Takahashi単に実装するだけなら以下でいいのだけど、共通部分を抜き出してコンポーネント化したい。
Kazuki Takahashi共通部分に必要な機能
- 開閉状態変数の隠蔽
- モーダルの要素がbody要素内の下部にレンダリングされる
- 複数のモーダルを同時に表示できる
- 背景のオーバーレイ(backdrop?)部分の表示、クリック時にモーダルを閉じる
- 表示・非表示時のtransition
- ESC押下時に最後に表示したモーダルを閉じる
- モーダルが閉じる前に状態に応じて確認ダイアログを表示できる