vue.js - Vuetify 工具提示悬停并带有链接

Question

是否可以有 Vuetify's v-tooltip带有可点击的链接？ 此时使用文档提供的默认代码

    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-icon
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >mdi-home</v-icon>
      </template>
      <a href="#">clickable link</a>
    </v-tooltip>

我们无法单击 anchor 链接，因为一旦我们将鼠标移出图标，工具提示就会自动关闭。这是 Vuetify 的限制吗？

Answer 1

您有 2 个问题需要解决:

1. 一旦鼠标离开激活器(图标)，工具提示就会隐藏。只需使用 close-delay 属性设置为(例如)2000(毫秒)...这样工具提示不会立即消失，而是在您将鼠标移出图标时 2 秒后...

2. 默认情况下，Vuetify 工具提示的内容使用 pointer-events: none; 呈现。 CSS 属性。这意味着内容不会生成任何指针事件。您唯一能做的就是覆盖默认样式...

模板

     <v-tooltip bottom close-delay="2000">
        <template v-slot:activator="{ on, attrs }">
          <v-icon
            color="primary"
            dark
            v-bind="attrs"
            v-on="on"
          >
            mdi-home
          </v-icon>
        </template>
        <a href="#">clickable link</a>
      </v-tooltip>

样式

.v-tooltip__content {
  pointer-events: initial;
}

Demo