Webアプリケーションを公開するまでのつぶやき 15

プロローグはこちら↑。

お気に入りを全削除

前回の終わりに次回は図書がどの図書館に所蔵されているかを検索する機能を作るといって締めたのですが、先にお気に入りを全削除する機能を作ってしまおうかと思い立ってしまいました。
なので、こっちを先に作ります。

項目追加

モーダルを表示する

「お気に入りを全て削除する」というボタンをタップした時に、一度警告をしたいですよね。
うっかりボタンを触ってしまって、なんの警告もなく全削除とかになったら悲しいですからね。
この警告ですが、モーダル表示していこうと思います。
モーダルの実装にはTeleportを使います。

Teleport | Vue.js

モーダルで警告

こんな感じでモーダルを表示して警告します。
本当は背景を薄いグレーにしてモバイルアプリのダイアログを表示した時みたいにしたかったんですが、私のcomponenntの作りが悪く、to="body"にしてもこの中央のComponenntにしか飛べなくなってるみたいです。
ここ直すの面倒なので、影をつけて後ろのViewを区別してお茶を濁しました。

LocalStrageの削除

localStorage.removeItem("favorite_libralies");

お気に入りを保存していたfavorite_libraliesを全て削除します。

今回はここまでです。
ここまで読んで下さった方ありがとうございます。

次回はISBNで該当図書所蔵の図書館を検索する機能を作っていこうと思います。
ちょっと作りかけてはいるのですが、虫眼鏡のついたいかにも検索できそうなテキストボックスを作るのに難航しております。
css難しい。。。