停用Vuetify 2中v-checkbox的懸停效果
P粉826429907
2023-09-03 20:25:54
<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>
這是漣漪效果，您可以使用
: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>