monteecristoo’s blog

https://twitter.com/irakaarozo

metismenu + vueJs スクリーンサイズに応じて切り替えたい場合

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で画面サイズを取得

参考:

dev.mozilla.jp

qiita.com