Vuetifyのv-cardを使ってカード内の特定メッセージ上に編集ボタンを出す

はじめに

メッセージをホバーしたときだけメニューを出すというUIをVuetifyを使ってやってみたメモです。
イメージとしてはSlackのメッセージを操作するメニューです。

やってみたこと

CardsコンポーネントとHoverコンポーネントを組み合わせて実現しました。
また、「自分に権限のあるメッセージのみ変更できる」みたいな条件も付けたかったので、2メッセージ目だけメニューがポップアップするようにしてみました。

こんな感じです。

App.vue

<template>
  <v-app>
    <v-content>
      <v-container fluid>
        <template v-for="i in [1, 2]">
          <v-card class="mb-4 rounded-xl" :key="i">
            <template v-for="j in [1, 2, 3]">
              <div :key="j">
                <v-hover v-slot="{ hover }">
                  <v-list-item
                    :class="
                      hover && j === 2
                        ? 'transition-ease-in bg-grey rounded-xl'
                        : ''
                    "
                  >
                    <v-fab-transition>
                      <v-btn
                        v-show="hover && j === 2"
                        dark
                        absolute
                        top
                        right
                        fab
                        small
                      >
                        <v-icon>mdi-pencil</v-icon>
                      </v-btn>
                    </v-fab-transition>
                    <v-list-item-avatar
                      size="40"
                      color="#555"
                      class="mr-4"
                    ></v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title>
                        message{{ i }}-{{ j }}
                      </v-list-item-title>
                      <div class="body-2 text-wrap">
                        hogehogehogehoge<br />
                        hogehogehogehoge<br />
                        hogehogehogehoge<br />
                      </div>
                    </v-list-item-content>
                    <v-list-item-avatar
                      size="80"
                      color="grey"
                    ></v-list-item-avatar>
                  </v-list-item>
                </v-hover>
              </div>
            </template>
          </v-card>
        </template>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {};
</script>

<style scoped>
.transition-ease-in {
  transition: all 0.5s ease-in-out;
}
.bg-grey {
  background-color: #eee;
}
</style>

なお、使用したライブラリのバージョンは次のとおりです

• vuetify 2.4.9

参考

• Card component — Vuetify https://vuetifyjs.com/en/components/cards/
• Hover component — Vuetify https://vuetifyjs.com/en/components/hover/