Vuetify3でFab使いたいんじゃい

きっかけ

Vue3に対応したVuetify3がリリースされてしばらく経ったが、まだ実装されていないコンポーネントなども多く、Floating　Action　Buttonもその一つです。
右下に固定のボタン、今はもう古臭いかもしれないけどどうしても使いたい！でも調べても出てこない！じゃあ頑張る！

ヒント(というかほぼ答え)

FABは廃止されていましたが、Vuetify３の公式ドキュメントの右下にはしっかり使われていました。

このドキュメントはソースが公開されているもので、Githubのソースを確認するとそれっぽいコンポーネントを発見。

コンポーネントを見るとほぼ答えがありました。

BackToTop.vue

<template>
  <v-layout-item
    v-scroll="onScroll"
    class="text-end pointer-events-none"
    model-value
    position="bottom"
    size="88"
  >
    <div class="ma-4">
      <v-fab-transition>
        <v-btn
          v-show="model"
          class="mt-auto pointer-events-initial"
          color="primary"
          elevation="8"
          icon="mdi-chevron-up"
          size="large"
          @click="onClick"
        />
      </v-fab-transition>
    </div>
  </v-layout-item>
</template>

<script setup>
  import { ref } from 'vue'

  const model = ref(false)

  function onScroll () {
    model.value = window.scrollY > 200
  }

  function onClick () {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    })
  }
</script>

<style scoped>
  .pointer-events-none {
    pointer-events: none;
  }

  .pointer-events-initial {
    pointer-events: initial;
  }
</style>

加工

トップに戻る機能とかはいらないので、少し機能を削って投稿ボタンっぽいアイコンをつければいい感じのFABになりました。

FloatingActionButton.vue

<script setup>
    import {  PencilIcon } from '@heroicons/vue/24/solid'
</script>
<template>
    <v-layout-item class="text-end" model-value position="bottom" size="88">
        <div class="ma-4">
            <v-btn class="mt-auto text-white" color="orange"
                :icon="PencilIcon" size="large" />
        </div>
    </v-layout-item>
</template>

スッキシ！