Значок кнопки Vuetify со встроенным текстом

Question

то, чего я хотел бы достичь, это v-chip, который действует как кнопка, а не как что-то, что можно выбрать ...

Пока я пробовал:

<v-btn icon>
  <v-avatar>
    <img :src="user.avatar" />
  </v-avatar>
  My Text
</v-btn>

Но это не так, как ожидалось ...

Я также пытался обернуть все внутри чипа, но даже здесь я не могу заставить его работать должным образом ...

Может кто-нибудь объяснить, как я могу это сделать? В основном на моей верхней панели инструментов мне нужно отобразить значок пользователя с его именем справа, он должен быть встроен в другие элементы v-btn icon, а также, нажав на chip/btn, он должен открыть раскрывающийся список ...

Конечно, мне не нужно все это от вас, просто чтобы понять, как создать кнопку со значком со встроенным текстом справа ...

Спасибо

Answer 1

Я использовал v-chip, чтобы создать иконку со встроенным текстом, и использовал css, чтобы изменить указатель v-chip, обернутый v-hover для сохранения высоты при наведении и, наконец, обернутый v-hover на v-menu, чтобы показать выпадающий список при нажатии на v-chip.

<div id="app">
    <v-menu offset-y>
        <template v-slot:activator="{ on }">
            <v-hover>
                <v-chip  slot-scope="{ hover }"
                         :class="`elevation-${hover ? 5 : 2}`"  v-ripple  color="indigo" text-color="white" v-on="on">
                    <v-avatar>
                        <v-icon>account_circle</v-icon>
                    </v-avatar>
                    Sagar
                </v-chip>
             </v-hover>
        </template>
       <v-list>
           <v-list-tile
               v-for="(item, i) in items"
               :key="i"
               @click=""
           >
               <v-list-tile-title>{{ item.title }}</v-list-tile-title>
           </v-list-tile>
        </v-list>
    </v-menu>
</div>

<script>
    new Vue({
      el: '#app',
      data() {
        return {
          items: [
            { title: 'Click Me' },
            { title: 'Click Me' },
            { title: 'Click Me' },
            { title: 'Click Me 2' }
          ],
       }
     }
   })
</script>

<style>
    .v-chip .v-chip__content{
        cursor: pointer;
    }
</style>