こんにちは、フロントエンドエンジニアのてりーです。
はじめに
久々のVue.jsですが、今回は開閉式のメニューをコンポーネントで作っていきたいと思います。
下記の感じのクリックすると開いたり、閉じたりする感じのコンポーネントですね。
アコーディオンって呼ばれ方をする場合もあります。
vuetifyのv-selectの使い方は知りたい方はこちらの記事を読んで下さい
実装パート
HTML部分
以下のようなソースコードになります。
数字を振ってあるので、順番に解説していきます。
<template> <div class="profile-accordion"> //①見えている「てりー」の部分に@clickイベント// <div class="profile-title" @click="toggle"> <p>てりー</p> <div class="base"> <span class="down-arrow"></span> </div> </div> //②transitionを使って動きを何パターンか指定// <transition v-on:before-enter="onBeforeEnter" v-on:enter="onEnter" v-on:bofore-leave="onBeforeLeave" v-on:leave="onLeave" > //③v-showでクリック時のみ見えるようにする// <div v-show="show" class="accordion-wrapper"> <div class="accordion-title -ly_contents"> <p>メニュー</p> </div> <div class="accordion-contents -ly_contents"> <ul> <li class="contents-list">基本情報</li> <li class="contents-list">パスワード</li> <li class="contents-list">メールアドレス</li> </ul> </div> <div class="bar -ly_contents"></div> <div class="accrodion-footer -ly_contents"> <p>サインアウト</p> </div> </div> </transition> </div> </template> ①@clickイベント
@clickはv-onの省略形です。
v-onで見えている部分をクリックするとtoggleというイベントが発火するようにしています。
toggleの処理はscriptの部分で書きます。
②transitionを指定
transitionでイベント時の動き方を指定しています。
transitionでは動きに対して、そのフェイズ毎に状態を指定することができます。
今回は以下の4パターンで指定しています。
具体的な状態はscriptにて記載しています。
//要素の表示前 v-on:before-enter="onBeforeEnter" //要素の表示中 v-on:enter="onEnter" //要素を閉じる前 v-on:bofore-leave="onBeforeLeave" //要素を閉じ中 v-on:leave="onLeave"③v-showにて表示・非表示切り替え
v-showで”show”状態なら括った要素を表示できるようにしています。
showがtrueかfalseかは@clickイベントのtoggleにて切り替えられるようにしています。
script部分
<script> export default { name: "HelloWorld", //①showの初期状態はfalseで閉じておく data() { return { show: false }; }, methods: { //②toggleにてshowを切り替え toggle: function() { this.show = !this.show; }, //③transitionの各々での高さを指定 onBeforeEnter: function(el) { el.style.height = 0; }, onEnter: function(el) { el.style.height = "182px"; }, onBeforeLeave: function(el) { el.style.height = "182px"; }, onLeave: function(el) { el.style.height = 0; } } }; </script>①showの初期値
showの初期値はfalseで指定指定して、閉じています。
②toggleイベント
toggleイベントの処理に、showの切り替えを入れています。
これにより、クリックする度に表示・非表示が切り替わります。
③transitionの値の指定
先ほど出てきたtransitionの各フェイズでの具体的な値を指定しています。
今回は開いている時に高さが出て、閉じている時は高さ0になるようにしています。
css部分
style scoped> .profile-accordion { height: 210px; width: 144px; } .profile-title { margin-left: 50px; height: 20px; display: flex; } .profile-title > p { margin: 0; height: 20px; width: 56px; color: #354052; font-family: "Noto Sans CJK JP"; font-size: 14px; letter-spacing: 0; line-height: 20px; } .profile-title > .base { margin-top: 13px; margin-left: 6px; } .profile-title > .base > span { width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: #C5D0DE transparent transparent transparent; } .accordion-wrapper { position: relative; margin-top: 20px; margin-right: 80px; height: 182px; width: 140px; background-color: #FFFFFF; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); } .accordion-wrapper::before { content: ""; position: absolute; display: block; width: 0; height: 0; left: 100px; top: -10px; border-right: 10px solid transparent; border-bottom: 10px solid #C5D0DE; border-left: 10px solid transparent; } .accordion-wrapper::after { content: ""; position: absolute; display: block; width: 0; height: 0; left: 100px; top: -8px; border-right: 10px solid transparent; border-bottom: 10px solid #FFFFFF; border-left: 10px solid transparent; } .-ly_contents { margin-left: 16px; } .accordion-title { padding: 20px 0 16px; } .accordion-title > p { color: #354052; font-family: "Noto Sans CJK JP"; font-size: 14px; letter-spacing: 0; line-height: 18px; padding: 0; margin: 0; text-align: left; } .accordion-contents { display: block; padding: 0; } .accordion-contents > ul { text-align: left; padding: 0; margin: 0 0 10px; } .accordion-contents > ul > li { color: #354052; font-family: "Noto Sans CJK JP"; font-size: 12px; letter-spacing: 0; line-height: 18px; list-style: none; margin-bottom: 8px; } .bar { height: 0.99px; width: 108px; background-color: #E0E6EF; } .accrodion-footer { padding: 0; text-align: left; } .accrodion-footer > p { color: #354052; font-family: "Noto Sans CJK JP"; font-size: 12px; letter-spacing: 0; line-height: 18px; margin-bottom: 16px; } </style> cssは形は作りましたが、汚いのであまり参考にしない方が良いです！笑
時間があるときに修正します。