updated: 2018/4/25
metismenu ・・・ class metismenuが複数あると2つ目がエラー？？？
- 大画面ではサイドに固定されたmetismenuが使いたい
- モバイルではスワイプでmetismenuを使ったサイドバーを表示させたい
2種類のサイドバーを用意して画面サイズごとに切り替えたい
→→
display: none で表示を調整してもDOMが残っているとエラーが出るのでDOMごと消して切り替える
solution: v-if (DOMごと消える) ** v-showはDOMが残る
________________________________________________
<div class="large-sidenavbar">
<div v-if=" isLarge === true ">
<sidenavbar></sidenavbar> ・・・metismenu①
</div>
</div>
_________________________________________________
<swiper :options="swiperOption" ref="swiper">
<swiper-slide class="menu">
<sidenavbar></sidenavbar>・・・metismenu②
</swiper-slide>
<swiper-slide class="content"></swiper-slide>
</swiper>
____________________________________________________
<script>
computed: {
isLarge() {
if(window.matchMedia('(min-width: 1024px)').matches)
{
return true;
} else
{
return false;
}
}
}
</script>
<style>
@media (min-width: 1024px) {
.menu, .menu-button {
display: none;
}
}
</style>
2つ目はdisplay: noneで処理しても1つ目でエラーが出ない
DOMの消去とdisplay:none
DOMの消去はtoggleした時のコストが大きい、display:noneはtoggleコストは小さいがページロード時のイニシャルコストが大きい。そのため一長一短。
javascriptで画面サイズを取得
参考:
追記：
