Vueと共通

【Nuxt.js】Modal実践編:QueryでModalを管理する①

前置き

今回はqueryによるModalの切り替えです!
上の画像のurlにご注目👀
queryが分からない場合はこちら
https://note.com/aliz/n/ndf76ebe9853b


メリット

1つのcomponentsで
複数のModalを表示させることができます✨
Modalごとにcomponentsを
作らなくても良いんです✨

ちなみにModalが1種類だけで良ければ
シンプルな解説記事をご覧ください
https://note.com/aliz/n/n2f0bc857defb


テンプレート

aLizでテンプレートを用意しているので
ぜひgit cloneして使ってください🍒

aLizテンプレート

scssが使えたり
ESlintで綺麗なコードが書けたり
便利です〜✨
ESlintエラーはこれで自動で直ります💕

terminal

$ npm run lint:fix

変数で背景色などを変えています!

どちらかで調整してみてください🌟
assets/scss/common.scssで
color, background-colorをコメントアウト
または
assets/scss/_colors.scssで
該当する変数の色を変更する


構成

) pages

buttonをclickでrouter.push

) components

中身はqueryで切り替え
pageでrouter.pushしたqueryに合わせて
v-ifで表示を切り替える

固定
外見の白背景、閉じるボタン、閉じる背景


下準備

aLizテンプレート使用の場合

) pages

importしているcomponents/atoms/ButtonDefault.vue
こちらは消してOKです!
$emitの使い方の参考に入れています。
続きの記事で使うのでコメントアウトでもOK♪


Step1: Modalを作成

流れ

土台のModalを作りましょう♪
ファイルを作ったら
layouts/default.vueに入れて
表示を確認しながらやっていきましょう👀

ディレクトリ

アトミックデザインに基づいて
ファイル分けをしています🙋‍♀️
要素の大きさごとに分けているので
どこに何があるのか直感的に分かり
非常に便利です!✨

もちろん好きに作ってもらってもOKです!
分け方などはこちらを参考にしてください👀
また原則としてimportするのは
自分の1つ下のサイズのみです💡
Atomic Design とは

directory

components/
--| templates/
----| modals/
-----| ModalRoute.vue

layouts/
--| default.vue

layouts/default.vueって?

pagesに毎回componentsを
importしなくても良くなります🤗

コード

) file

) components

iconはiconmonstrのX Mark 1
HTML/CSSがメインのため解説なし


Step2: queryで表示/非表示を切り替える

今のままだと常にModalが表示されます👀
queryでModalの
表示/非表示を切り替えましょう!🍒
Vue Router基礎編(params, query)はこちら

コード

) pages

$router.push('?modal={好きな英数字}')
$router.pushでqueryを指定します。
queryが'modal'の時にModalRouteを表示

) components

template部分のみ

解説

  • v-if="$route.query.modal"
    Modal全体を
    queryが'modal'の時のみ表示させる
  • @click="$router.push('/')"
    背景と閉じるボタンをクリックしたら
    queryの'modal'を外して
    Modal全体を非表示にする
    $emitがいらないので楽ですね♪

Step3: 中身をqueryごとに作る

中身は分かりやすく
<p>タグのみでやりましょう🌟
作ったらurlを変更して
チェックしましょう✨👀

コード

) components

template部分のみ

解説

  • v-if="$route.query.modal === 'abc'"
    queryが?modal=abcならtrueで表示
    →index.vueでbuttonをクリックすると
     queryが一致するので表示
  • v-if="$route.query.modal === '123'"
    queryが?modal=123ならtrueで表示
  • {{ $route.query.modal }}
    ついでに表示も変えてみましょう♪

Step4: 調整

ボタンを表示を追加したり
実際のページらしいテキストに変更し
見た目を整えていきましょう🍒

buttonを追加する
それぞれqueryをloginとregisterに変更

コード

) pages

template部分のみ

) components

template部分のみ

今回はここまで!
Modalの外側と内側で
コンポーネント分けをし、
最終的にformを作成していきます!

-Vueと共通
-,

© 2020 aLiz Nuxt