VuetifyJs 工具提示中的可点击内容

Question

我在我正在开发的 VueJS 应用程序中使用 VuetifyJS，但在使工具提示中的内容可点击时遇到问题。即使我调整了工具提示弹出窗口的不透明度，点击工具提示内容仍然将点击事件传递给工具提示下方的元素。

如何使工具提示中的内容可点击？

https://codepen.io/deftonez4me/pen/mdRwozq

    <v-btn @click.stop="topicItem.editTime = !topicItem.editTime" icon x-small>
          <v-icon>mdi-clock-time-three-outline</v-icon>
    </v-btn>
    
    <v-tooltip v-model="topicItem.editTime" top color="primary" title="Click to Edit Time Allotted" :open-on-hover="false" :z-index="9999">
      <template v-slot:activator="{ on, attrs }">
            <span><!-- 00 --></span>
      </template>

      <v-time-picker
        format="24hr"
        use-seconds
      ></v-time-picker>
    </v-tooltip>

Answer 1

我注意到您还尝试使用外部按钮触发工具提示。

像这样包含一个完整的时间选择器并不是工具提示的预期用例。工具提示主要是为组件的 meaning/functionality.

提供文本线索

这不起作用的原因是工具提示父包装了 v-time-picker 并阻止您通过它点击时钟。如果您使用检查元素，您将看到一个工具提示 div 完全覆盖时间选择器组件。

对于此用例，您最好使用 v-menu 作为弹出窗口。

您可以使用 activator 插槽，或者使用 v-model 或 value 将其绑定到外部按钮。

这样您就可以让 v-time-picker 像工具提示一样弹出，而且还可以点击其内容。

您可以从 popover section of the menu component in Vuetify

中找到更多信息

VuetifyJs 工具提示中的可点击内容

Clickable content in a VuetifyJs Tooltip

javascript

vue.js

vuejs2

vuetify.js