如何在任意元素点击时触发 Vuetify 组件激活器？

Question

当使用 Vuetify (2.5.0) 和 Vue (2.6.12) 点击元素时，我试图打开一个小弹出浮动菜单，例如

<v-menu bottom offset-y>
  <template v-slot:activator="{ on, attrs }">
    <div v-bind="attrs" v-on="on"></div>
  </template>
  <div>My popup floating content..</div>
</v-menu>

...但我不确定激活器应该如何处理点击事件。我没有使用v-btn 作为激活器是有原因的。 vuetify 文档给出了示例，但他们总是使用 v-btn 例如而不是上面激活器插槽中的 div，它是<v-btn v-bind="attrs" v-on="on">A Menu</v-btn>。

Answer 1

您可以破坏 on 插槽道具以获取点击事件，然后在您的 div 中使用它：

<v-menu bottom offset-y>
  <template v-slot:activator="{ on:{click}, attrs }">
    <div v-bind="attrs" @click="click">show menu</div>
  </template>
  <div>My popup floating content..</div>
</v-menu>