如何点击任意自定义元素触发Vuetify组件的activator激活器

核心参数说明 #

activator插槽返回的两个参数直接对应激活器需要的属性和交互逻辑：

• attrs：Vuetify内部生成的无障碍属性、菜单定位关联属性，直接通过v-bind="attrs"绑定到自定义激活元素即可，无需额外修改。
• on：Vuetify封装的交互事件集合，内置了点击切换菜单显隐、键盘快捷操作（回车/空格触发、ESC关闭）等逻辑，直接通过v-on="on"绑定即可自动实现点击触发效果，不需要单独额外编写点击事件。

基础可用示例 #

你给出的基础代码逻辑完全可用，只需要给激活用的div添加可点击的内容或样式即可正常工作，完整示例如下：

<template>
  <v-menu bottom offset-y>
    <template v-slot:activator="{ on, attrs }">
      <!-- 自定义div作为激活器，无需使用v-btn -->
      <div 
        v-bind="attrs" 
        v-on="on"
        style="width: 120px; height: 40px; line-height: 40px; text-align: center; border: 1px solid #e5e7eb; border-radius: 4px; cursor: pointer;"
      >
        点击弹出菜单
      </div>
    </template>
    <!-- 菜单自定义内容 -->
    <v-list>
      <v-list-item link>
        <v-list-item-title>菜单选项1</v-list-item-title>
      </v-list-item>
      <v-list-item link>
        <v-list-item-title>菜单选项2</v-list-item-title>
      </v-list-item>
      <v-list-item link>
        <v-list-item-title>菜单选项3</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

扩展场景处理 #

需要额外执行自定义点击逻辑 #

如果点击激活器时需要同时执行其他业务逻辑，直接给激活元素追加@click="你的自定义方法"即可，Vue的事件绑定机制会同时执行内置的菜单切换逻辑和你自定义的方法，不会互相覆盖。

完全手动控制菜单显隐 #

如果不使用Vuetify内置的交互逻辑，可以通过v-model绑定菜单的显隐状态手动控制，示例如下：

<template>
  <v-menu v-model="menuVisible" bottom offset-y>
    <template v-slot:activator>
      <div 
        @click="handleActivatorClick"
        style="width: 120px; height: 40px; line-height: 40px; text-align: center; border: 1px solid #e5e7eb; border-radius: 4px; cursor: pointer;"
      >
        自定义逻辑激活
      </div>
    </template>
    <div>自定义菜单内容</div>
  </v-menu>
</template>
<script>
export default {
  data() {
    return {
      menuVisible: false
    }
  },
  methods: {
    handleActivatorClick() {
      // 执行业务逻辑
      console.log('激活器被点击')
      // 手动控制菜单显隐
      this.menuVisible = !this.menuVisible
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者RTF