vue.js - 如何在 Vuetify 中使用变亮或变暗颜色作为 v-btn 的背景？

Question

我在 vuetify 上有一个这样的按钮：

<v-btn color="blue" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

结果是这样的：

现在我尝试这样做：

<v-btn class="blue lighten-4" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

但结果是这样的：

虽然我期待的只是一种浅色。

我怎样才能实现我的目标？注意这里使用的是 vuejs 2。

Answer 1

我通过写这个解决了它：

<v-btn color="blue--text text--lighten-4" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

这是因为图标被视为文本而不是背景

Answer 2

将颜色添加到您的 v 图标

<v-icon color="blue">

我会避免用蓝色文字在线捆绑它