クラト株式会社のフルスタックエンジニア（仮）の一條です。
弊社提供のL-BOOST（エルブースト）サービス、LIFFページのコーディングに悩む実装の日々です。

 

Webサイトでよく見るページ上のダイアログ表示。
ダイアログも大きなものであれば、色々な操作ができますね。
1枚のページ画面上では表現しにくいものも、複数のダイアログがあれば表現しやすいです。
今回のお題はそのダイアログ表示でした。

単純にダイアログ表示（静的）を見せるだけなら、まだよいのです。
さらにSSRで終わるうちはいいのです。
面倒なのは、完全に動的にデータを書き換えて表示する場合。
（注：L-BOOST（エルブースト）はnuxtjsベースでuniversalモードで動いております。）

こちら、今回は
・　モーダルパーツをコンポーネント化
・　モデルバインディングで初期表示分はすぐさま表示
・　切り替えデータ分はデータ更新＋コンポーネントの再レンダリング
で対応しました。

portraitではちょーっと狭いですが、会員証あたりのページでは、会員証の情報がさくっとダイアログ表示されます。さらに、予約機能で予約先の店舗情報や、予約時間をタップして決めてもらう部分でダイアログが活躍しています。