在 vuetify 中，当按钮被禁用时如何显示工具提示

Question

我在我的 vuetify 项目中使用按钮和工具提示组件。 我只想在按钮被禁用并且我正在寻找解决方案时才显示工具提示，我该如何正确地做到这一点。

目前，工具提示仅在启用按钮时可见。

我的代码：

<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn class="ma-2" color="primary" :disabled="disabled" v-bind="attrs" @click="clear" v-on="on">
Save
</v-btn>
 </template>
<span>its my toolip</span>
</v-tooltip>

Answer 1

不确定是否有更好的答案，但您可以使用v-if和v-else 。 另外，如果你想显示禁用按钮的工具提示，你应该用空的div包裹按钮。 下面试试。

  <v-tooltip v-if="disabled" top>
    <template v-slot:activator="{ on, attrs }">
      <div v-on="on">
        <v-btn class="ma-2" color="primary" disabled v-bind="attrs" @click="clear">
          Save
        </v-btn>
      </div>
    </template>
    <span>its my toolip</span>
  </v-tooltip>
  <v-btn v-else class="ma-2" color="primary" v-bind="attrs" @click="clear">
    Save
  </v-btn>

Answer 2

            <v-tooltip top>
              <template v-slot:activator="{ on, attrs }">
                <div v-on="disabled ? on : ''">
                  <v-btn class="ma-2" color="primary" :disabled="disabled" v-bind="attrs">
                    Save
                  </v-btn>
                </div>
              </template>
              <span>its my tooltip</span>
            </v-tooltip>

或者这个，所以你不需要两个按钮。 唯一显着的区别是第 3 行。

已经有一段时间了，但希望这会有所帮助。 如果这看起来很奇怪，请告诉我：）