vue.js 删除图标按钮上的涟漪效果

mwecs4sa  于 2023-02-13  发布在  Vue.js
关注(0)|答案(6)|浏览(120)

我需要有一个图标谁使按钮的工作(加载),但我会删除这个图标的圆形按钮效果
我该怎么做?https://codepen.io/sebastiancz/pen/gOpjbar?editors=1010

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <div>
        <v-btn flat icon color="blue lighten-2">
          <v-icon>power</v-icon>
        </v-btn>
      </div>
    </div>
  </v-app>
</div>
apeeds0o

apeeds0o1#

找到它的兄弟,使用这两个CSS,它会做的伎俩:

.v-btn:before {
  opacity: 0 !important;
}

.v-ripple__container {
  opacity: 0 !important;
}

让我知道它是否有效,如果无效,将进一步帮助您

dtcbnfnu

dtcbnfnu2#

只是

v-ripple="false"

https://vuetifyjs.com/en/directives/ripple/#usage

v09wglhw

v09wglhw3#

hi尝试这个代码希望它会帮助你:-

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <div>
        <v-btn color="blue lighten-2">
          <v-icon>power</v-icon>
        </v-btn>
      </div>
    </div>
  </v-app>
</div>
lkaoscv7

lkaoscv74#

我想这会对你有帮助的!
添加此CSS

.v-btn:before {
  opacity: 0 !important;
}

让我知道这是否可行

bvjveswy

bvjveswy5#

在vuetify3中仅使用

<v-btn variant="plain">

文件:www.example.comhttps://next.vuetifyjs.com/en/api/v-btn/#props-variant

nhhxz33t

nhhxz33t6#

.v-btn:hover:before { background-color: transparent }

相关问题