英文:
Disable hover effect on v-checkbox in Vuetify 2
问题
在 Vuetify 2 中悬停在 v-checkbox 上时，复选框后面会出现一个变暗的圆圈。我想让它不出现。目前，我的 v-checkbox 包装在一个 v-tab 和一个 v-tooltip 中。我怀疑这可能不重要，但也有可能重要。
<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>提示文本</span>
</v-tooltip>
</v-tab>
我尝试将其包装在 v-hover 中并使用禁用属性，但这没有起作用。
英文:
When hovering over a v-checkbox in Vuetify 2, a darkened circle appears behind the checkbox. I would like to make this not appear. Currently, my v-checkbox is wrapped in a v-tab and a v-tooltip. I doubt that matters, but it is possible.
<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>
I tried wrapping it in a v-hover and using the disabled prop, but that didn't work.
答案1
得分: 1
这是涟漪效果，您可以使用 :ripple 属性关闭它：
<v-checkbox
:ripple="false"
...
/>
这是一个示例：
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-js -->
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
myTabList: [1, 2, 3]
}
}
})
<!-- language: lang-html -->
<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>
<!-- end snippet -->
英文:
That's the ripple effect, you can turn it off using the :ripple prop:
<v-checkbox
:ripple="false"
...
/>
Here it is in a snippet:
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-js -->
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
myTabList: [1, 2, 3]
}
}
})
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论