如何删除 vuetify 中的 v-btn 背景？

Question

当我悬停或单击 v-btn 时，如何删除按钮后面的背景？

我尝试将 ripple 设置为 false，但仍然有背景。我找不到这个背景的 css。

 new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.15/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.15/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-card flat>
      <v-card-text>
        <v-container fluid class="pa-0">
          <v-row>
            <v-col cols="12">
              <p>Normal</p>
            </v-col>

            <v-col cols="12" sm="3">
              <v-btn ripple="false" icon color="pink">
                <v-icon>mdi-heart</v-icon>
              </v-btn>
            </v-col>

          </v-row>
        </v-container>
      </v-card-text>
    </v-card>
  </v-app>
</div>

原文由 Jon Sud 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于单击（波纹特征）时的背景，您缺少绑定注释，您传递的是 字符串 而不是 假 值。所以在 ripple 之前加上“：”就可以了。

但是，要处理悬停背景，您需要在 css 中进行一些修改。我在 scss 中写这个，你可以按照这个想法

<v-btn :ripple="false" icon color="pink" id="no-background-hover">
  <v-icon>mdi-heart</v-icon>
 </v-btn>

<style lang="scss">
#no-background-hover::before {
   background-color: transparent !important; <= can set to any color you want
}
</style>

上面的代码仅设置为具有 id "no-background-hover" 的特定按钮，如果您希望其他所有按钮都发生这种情况。然后这是该按钮的类，您可以将您的 css 查询选择器更改为您需要的类级别

<button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default pink--text" id="no-background"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-heart theme--light"></i></span></button>

原文由 Jake Lam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一段时间以来，我一直在寻找这个问题的答案，我从这里应用了一个破解的解决方案，但它有视觉效果，感谢上帝，我找到了一个负责这个的属性。您需要像这样向按钮添加一个“ plain ”属性：

 <v-btn fab large plain><v-icon>mdi-phone</v-icon></v-btn>

这对我来说是一笔交易。 Vuetify 指南说： 普通按钮具有较低的基线不透明度，可对悬停和焦点做出反应。

原文由 Andrew Zagarichuk 发布，翻译遵循 CC BY-SA 4.0 许可协议