【Vuetify】Fullscreen API使用時にv-menuなどのcomponentが表示されない時の対処

プチTips記事になりますが、VuetifyでFullscreen API使用時にv-menuなどのcomponentが表示されない場合についての対処法になります。

経緯としては、Video.jsを用いた動画部分があるのですが、そのコントロール部分に速度変更のcomponentがあり、v-menuを使ってドロップダウンで選択するようになっていたのですが、フルスクリーン時に出ないという問題がありました。

端的に言うと、そちらの再現と解決策はこちらになります。

https://hiroko-ino.github.io/fullscreen-api-vuetify-component-display-by-attach/

青いボタンのホバーでドロップダウンが出るようにしているのですが、左はフルスクリーン時にも出るようになっていて、右は出ません。

違いは一つ、attachを設定しているかどうかだけになります。

...
  <v-card color="blue-darken-2" height="600" ref="el">
    <v-card-title>
      <h1>Fullscreen API Area</h1>
    </v-card-title>
    ...
    // 表示されるv-menu
    <v-menu
      open-on-hover
      :attach="true"
    >
    ...
    // 表示されないv-menu
    <v-menu
      open-on-hover
    >
...
<script setup lang="ts">
import { useFullscreen } from '@vueuse/core';
import { ref } from 'vue';

const el = ref<HTMLElement | null>(null)

const { toggle } = useFullscreen(el) // VueUseのuseFullscreenを使用

  const items = [
    { title: 'Item 1' },
    { title: 'Item 2' },
    { title: 'Item 3' },
    { title: 'Item 4' },
  ];
</script>

attachを指定している場合とそうでない場合のDOMの出現の仕方を見てみましょう。

attachを指定していない場合

bodyの閉じタグの近辺に該当のDOMが挿入されています(v-listあたり)

attachを指定している場合

テレポートせずに該当のDOMが挿入されています(v-card内)

attachの説明

下記に説明があります。

https://vuetifyjs.com/en/api/v-menu/#props-attach

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. Generally not recommended except as a last resort: the default positioning algorithm should handle most scenarios better than is possible without teleporting, and you may have unexpected behavior if the menu ends up as child of its activator.

DeepL訳は下記になります。

オーバーレイ・コンテンツをテレポートさせる DOM 要素を指定します。要素の直接参照、querySelector 文字列、またはテレポートを無効にする true を指定します。デフォルトでは body を使用します。デフォルトの位置決めアルゴリズムは、テレポートを使用しない場合よりもほとんどのシナリオをうまく処理します。

これにより、オーバーレイコンテンツをv-card内(Fullscreen APIのターゲット)に表示するようにすれば、Fullscreen APIに排除されずに表示されるというわけです。今回はtrueで対応しましたが、親要素の指定でもOKです。

Vuetifyの2にもattachが存在しますので、そちらで解決できます。

既知の内容かもしれませんが、参考になれば幸いです。