[Vuetify]プロフ画像と削除アイコン

こうするとどうなるでしょう？

環境

Vue2
Vuetify

ソースコード

<v-badge offset-x="20" offset-y="20" overlap color="rgba(0,0,0,0)">
  <v-btn
    slot="badge"
    color="grey white--text"
    class="delete-button"
    fab
    height="20"
    width="20"
    @click="onClickDelete"
  >
    <v-icon small>fas fa-times</v-icon>
  </v-btn>
  <v-avatar size="80" class="mb-3 avatar" @click="onClickImage">
    <img
      src="@/assets/logo.png"
      alt="avatarImage"
      class="avatar-image"
    />
  </v-avatar>
</v-badge>

実装した結果

解説

今回実装したかったのは、クリックで画像アップロードできるようなプロフィール画像表示と、それを削除するボタンです。

avatar

プロフィール画像には v-avatar を使用します。
これはユーザープロフィール画像用のVuetifyコンポーネントです。

<v-avatar size="80" class="mb-3 avatar" @click="onClickImage">
  <img
    src="@/assets/logo.png"
    alt="avatarImage"
    class="avatar-image"
  />
</v-avatar>

badge

削除ボタンには v-badge v-btn を使用します。
v-badge はアバターのようなコンテンツに付属する部品として
用意されているコンポーネントです。

ただし、削除ボタンはクリックイベントが必要です。
v-badgeに直接クリックイベントを設けると、
画像をクリックした時のイベントと被ってしまいます。
それを回避するために v-btn を v-badge にスロットさせています。

<v-badge offset-x="20" offset-y="20" overlap color="rgba(0,0,0,0)">
  <!-- 削除クリックイベントを発生させるためのボタン -->
  <v-btn
    slot="badge"
    color="grey white--text"
    class="delete-button"
    fab
    height="20"
    width="20"
    @click="onClickDelete"
  >
    <!-- ×アイコン -->
    <v-icon small>fas fa-times</v-icon>
  </v-btn>
  <!-- 画像描画領域 -->
  <v-avatar>略</v-avatar>
</v-badge>

まとめると

<v-badge>
  <v-btn>
    <v-icon></v-icon>
  </v-btn>
  <v-avatar></v-avatar>
</v-badge>

このように、一見するとヘンテコなDOM構成で
プロフィール画像と削除アイコンを実装することができます。

リポジトリ