禁用Vuetify 2中v-checkbox的悬停效果-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

禁用Vuetify 2中v-checkbox的悬停效果

P粉826429907 2023-09-03 20:25:54

[Vue.js讨论组]

826

当在Vuetify 2中悬停在v-checkbox上时，复选框后面会出现一个变暗的圆圈。我想让它不出现。目前，我的v-checkbox被包裹在v-tab和v-tooltip中。我怀疑这并不重要，但有可能。 <pre class="brush:php;toolbar:false;"><v-tab v-for="tab in myTabList" :key="tab"> {{$t(tab)}} <v-tooltip bottom> <template #activator="{ on }"> <v-checkbox @click.stop/> </template> Tooltip text </v-tooltip> </v-tab></pre> 我尝试将其包裹在v-hover中并使用disabled属性，但没有成功。

P粉826429907

全部回复(1)

P粉2486022982023-09-04 00:33:24 1楼

这是涟漪效果，您可以使用:ripple属性来关闭它：

<v-checkbox
  :ripple="false"
  ...
/>

以下是一个示例：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      myTabList: [1, 2, 3]
    }
  }
})

<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@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-tab v-for="tab in myTabList" :key="tab">
          <span>{{tab}}</span>
          <v-tooltip bottom>
            <template #activator="{ on }">
              <span v-on="on">
                <v-checkbox @click.stop :ripple="false"/>
              </span>
            </template>
            <span>Tooltip text</span>
          </v-tooltip>
        </v-tab>
      </v-container>
    </v-main>
  </v-app>
</div>

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>