首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >禁用时显示验证工具提示按钮

禁用时显示验证工具提示按钮
EN

Stack Overflow用户
提问于 2019-05-30 08:02:47
回答 2查看 11.4K关注 0票数 26

我在使用Vuetify禁用的按钮上显示工具提示时遇到困难。

我已经确保工具提示可以在按钮启用时显示,这是预期的工作。我认为this question是相关的,但我还不够精通,不知道这是否适用于v-btn。我试图创建一个自定义类并将其添加到特定的v-btn元素中,但我没有任何运气。

示例HTML

代码语言:javascript
复制
<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

代码语言:javascript
复制
new Vue({
  el: '#app',
  data () {
    return {
      show: false
    }
  }
})

https://codepen.io/anon/pen/ZNqpOW?editors=1010

我希望当鼠标悬停在禁用的按钮上时,工具提示可以显示出来。我希望用这个来解释为什么这个按钮被禁用了。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-05-30 08:52:04

我不确定这是不是最好的方法,但我可以通过将禁用按钮包装在div标记中来获得工具提示:

Codepen

代码语言:javascript
复制
<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>
票数 50
EN

Stack Overflow用户

发布于 2020-09-16 21:25:26

随着vuetify工具提示演变为slot语法,正确的解决方案现在是这个:

代码语言:javascript
复制
<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>
票数 13
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56370021

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档