带内联文本的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包裹了鼠标以保持悬停时的高程，最后包裹了{{1 }}，按v-hover，可在单击v-chip时显示下拉菜单列表。

v-menu