Zenn
💻

VuetifyのDrawerを、画面サイズが変わったら自動で隠す方法

2020/05/09に公開
JavaScript
Vue.js
Vuetify
tech

やりたかったこと

Vuetifyの Navigation drawer を使って、スマホ表示のときにだけグローバルナビゲーションがDrawerに変わるUI を作っていました。

もちろんPCでウィンドウの幅を極端に狭くした場合にもスマホ相当の表示になってDrawerを出すことができるのですが、そうしてDrawerを出したあとでウィンドウサイズを大きくされると、全体はPC向けの表示になるのにDrawerだけは出たままというイマイチな挙動になります。

これを解決するため、画面サイズが変更されたら自動でDrawerを隠す実装をしました。

やり方

まず、Navigation drawerのAPI を眺めると、

Name
disable-resize-watcher

Type
boolean

Default
false

Description
Will automatically open/close drawer when resized depending if mobile or desktop.

とかいうやつがいて、どう考えても何もしなくても画面サイズが変わったら勝手に閉じてくれそうな感じがするんですが、少なくとも記事執筆時点ではPCでウィンドウサイズを変更しても何もしてくれませんでした。

issueも特にありません。詳細分かる方いたらぜひ 教えて ください🙇

自力でやる方法

というわけで自力で実装しました。

まず

mounted() {
  // this.drawerOpen がDrawerの v-model にバインディングされている
  window.addEventListener('resize', () => this.drawerOpen = false)
}

とかやってみたんですが、Drawerが開いたときにもwindowのresizeイベントが発火しているみたいで、開いたらすぐ閉じる動きになってしまいました🙄

試しに

mounted() {
  window.addEventListener('resize', e => console.log(e))
}

で調べてみると、

  • 普通にウィンドウサイズを変えたときは Event
  • Drawerが開いたり閉じたりしたときは UIEvent

だったので、これで見分けることにしました。

この場合、 instanceof 演算子を使えば判定が可能です。（参考）

e.type で取れるのかな？と思ったんですが、 e.type はいずれの場合も resize でした😅

結論

下記のコードで、「画面サイズが変わったら有無を言わさずDrawerを自動で閉じる」という意図どおりの動作を実現できました👍

mounted() {
  window.addEventListener('resize', e => {
    if (!(e instanceof UIEvent)) {
      this.drawerOpen = false
    }
  })
}
GitHubで編集を提案

Discussion