ひびのログ

日々ではないけどログを出力していくブログ

Vue.js + dialog 要素で使いやすいモーダルダイアログ

使いやすい(個人の感想)(人による)

考えたこと

  • せっかく <dialog> があるので使いたい
  • props に boolean を渡したらダイアログが開閉する
    • もちろんモーダルで
  • テキストだけ設定すれば使えるようにしたい
  • フォームなどを表示できるように slot も渡せるようにしたい
  • OK とキャンセルのボタンを入れ替え可能にしたい

dialog 要素について

developer.mozilla.org

  • いい感じに背景が暗くなる
    • しかも backdrop 疑似要素としてカスタマイズできる
  • 勝手に一番手前に表示される
  • ESC で閉じられる
  • アクセシビリティ対応が最初から結構できている

コード&動作

Playground

今回対応できなかったところ

  • フォーカス移動ができていない気がする
  • 背景のスクロールを止めるのができていない気がする
  • 型定義はもっと頑張れそう?
    • title, content が存在するときは slot が存在しないとか、その逆とか
  • 同じダイアログを複数同時に表示するのができない
  • ESC で閉じたときに、それを検知できない

やればできるはず。 型はどうだろうか……

ところで

ダイアログが増えがちで困ってる。 SPA でのダイアログ管理ってどうやるのがいいんだろう?