禁用Vuetify 2中v-checkbox的悬停效果
<p>当在Vuetify 2中悬停在v-checkbox上时，复选框后面会出现一个变暗的圆圈。我想让它不出现。目前，我的v-checkbox被包裹在v-tab和v-tooltip中。我怀疑这并不重要，但有可能。</p>
<pre class="brush:php;toolbar:false;"><v-tab v-for="tab in myTabList" :key="tab">
<span>{{$t(tab)}}</span>
<v-tooltip bottom>
<template #activator="{ on }">
<span v-on="on">
<v-checkbox @click.stop/>
</span>
</template>
<span>Tooltip text</span>
</v-tooltip>
</v-tab></pre>
<p>我尝试将其包裹在v-hover中并使用disabled属性，但没有成功。</p>
1
973
收藏
这是涟漪效果，您可以使用
:ripple属性来关闭它：以下是一个示例：
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>