はじめに
最近jQueryで書いていたコードをvueに書き直すことをしているのですが、vueだとjQueryで複雑になりがちなコードをシンプルに記述できるのがいいですね。書き方も直感的だし。
今回つくりたいのは、このサイトにあるようなこういうやつです。↓
https://syncer.jp/jquery-modal-window
jQueryや、vue+jQuery実装事例はいっぱい転がっているのですが、今回はvueだけを使ってもっとシンプルに作成しちゃいます。
(ちなみに今回は、どういう風に作るのか、という流れだけさらっと書きます。
なので、必要最低限のコードだけ紹介します。あとでコンテンツ載せるかもです
)
作成
jQueryでモーダル操作をしようとすると、クリックするDOMの指定やら、なんやらがめんどくさいですが、vueのdataを利用することで、（jsは）以下のコードだけで済んでしまいます。
流れとしては、コンテンツのclickイベントが発火したら、openItemメソッドのなかのtoggleModal();を更に呼び込みます。
toggleModal();の中では、vueのdata内に登録したisModalActiveという状態を切り替えることで、モーダル機能を実現します。
JS
new Vue({
el: '.l-wrapper',
data(){
return {
isModalActive: false,
}
},
methods: {
/**
* clickイベントが発火されたタイミングで、
* オーバーレイコンテンツを表示するフラグを持つdata(isModalActive)を切り替える
*/
openItem() {
this.toggleModal();
},
/**
* active状態を切り替える。
*/
toggleModal() {
this.isModalActive = ! this.isModalActive;
},
}
});
HTML
html部分では、先程作成したopenItemvueメソッドをclickで発火するように設定します。
（ちなみに、@clickはv-on:clickと同等です。）
<div class="l-wrapper">
<button class="p-modalBtn" @click="openItem">{ ここをクリックすると、モーダルが開きます。}</button>
</div>
<div class="p-modal" :class="{'is-open': isModalActive}">
{ clickで表示したいmodal_content部分 }
</div>
.p-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
visibility: hidden;
opacity: 0;
z-index: -1;
&.is-open {
visibility: visible;
opacity: 1;
z-index: 100;
}
}
こちら先程dataに登録した、isModalActiveの状態を感知して、is-openというクラスを付与することで、コンテンツをオーバーレイするclassを呼ぶことができます。
（ちなみに、:classはv-bind:classと同等です。）
おわりに
jQueryからちょっとづつ脱したい！という人にこういう簡単な取っ掛かりがあると、いいかと思いあえてシンプルなコードを載せました。機能単位でイメージが分けば、ちょっとづつvueの手軽さがわかっていただけるのではないかなと思います。
（自分が複雑なエコシステムを無理に理解しようとして挫折しそうになったので笑）
こういった知見が、少しでもそういった方に役に立てばいいなと思います。