【Vue.js】v-dialogのz-indexの指定方法

2020年12月20日

ダイアログ表示中、ツールバーの要素を押せなくしたい

2時間ほどハマったのでメモ。

<v-app-var id="toolbar">
#toolbar {
  z-index: 999
}

となっている場合、そのままv-dialogでダイアログを表示するとtoolbarにあるボタンや検索窓が押せてしまう。

なぜならtoolbarの方がダイアログより前面に位置するから。

【解決策】

・toolbarより前にオーバーレイ(灰色の無効化空間)をもってくる

・toolbarより前にダイアログをもってくる

<v-app-var id="toolbar" style="z-index: 1000;">

とする。すると、

ダイアログである .v-dialog__content-activeのz-indexが1002

オーバーレイであるv-overlay-activeのz-indexが1001となり、

両者がtoolbarの前面にあることから、toolbarの要素は押せなくなる。

めでたしめでたし。