禁用时显示验证工具提示按钮
禁用时显示验证工具提示按钮
提问于 2019-05-30 08:02:47
我在使用Vuetify禁用的按钮上显示工具提示时遇到困难。
我已经确保工具提示可以在按钮启用时显示，这是预期的工作。我认为this question是相关的，但我还不够精通，不知道这是否适用于v-btn。我试图创建一个自定义类并将其添加到特定的v-btn元素中，但我没有任何运气。
示例HTML
<div id="app">
<v-app id="inspire">
<v-container fluid class="text-xs-center">
<v-layout
flex
justify-space-between
row
wrap
>
<v-flex xs12>
<v-btn @click="show = !show">toggle</v-btn>
</v-flex>
<v-flex xs12 class="mt-5">
<v-tooltip v-model="show" top>
<template v-slot:activator="{ on }">
<v-btn disabled icon v-on="on">
<v-icon color="grey lighten-1">shopping_cart</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>示例JavaScript
new Vue({
el: '#app',
data () {
return {
show: false
}
}
})https://codepen.io/anon/pen/ZNqpOW?editors=1010
我希望当鼠标悬停在禁用的按钮上时，工具提示可以显示出来。我希望用这个来解释为什么这个按钮被禁用了。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-30 08:52:04
我不确定这是不是最好的方法，但我可以通过将禁用按钮包装在div标记中来获得工具提示：
<v-tooltip v-model="show" top>
<template v-slot:activator="{ on }">
<div v-on="on">
<v-btn disabled icon>
<v-icon color="grey lighten-1">shopping_cart</v-icon>
</v-btn>
</div>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>Stack Overflow用户
发布于 2020-09-16 21:25:26
随着vuetify工具提示演变为slot语法，正确的解决方案现在是这个：
<v-tooltip bottom :disabled="valid">
<template v-slot:activator="{ on }">
<div v-on="on" class="d-inline-block">
<v-btn color="primary" :disabled="!valid">Button</v-btn>
</div>
</template>
<span>You must accept first</span>
</v-tooltip>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56370021
复制相关文章
相似问题
腾讯云开发者
