如何在 vuetify 3 中创建 fab Button？

Question

在 vuetify 2 中，它与

<v-btn fab></btn>

一起使用。它如何与 vuetify 3 配合使用？

Answer 1

Vuetify 3 似乎并不特别支持

fab

按钮。但值得庆幸的是，Vuetify 文档确实有一个 FAB 按钮，即 。我们可以查找其来源。

我们可以进行一些小的更改以访问我们的 FAB 按钮：

<VLayoutItem model-value position="bottom" class="text-end" size="88">
  <div class="ma-4">
    <VBtn icon="mdi-plus" size="large" color="primary" elevation="8" />
  </div>
</VLayoutItem>

Answer 2

试试这个：

     <v-btn rounded="circle" color="teal" size="33">
       <v-icon size="small">mdi-heart</v-icon>
     </v-btn>

Answer 3

看起来他们已经将 v3+ 中的语法更改为：

<v-btn icon="mdi-plus"></v-btn>

文档这里。