单击事件槽项时如何抑制 v-calendar 的 @click:day ？

Question

我已经将 Vuetify (v1.5.16) 与 VueJS 一起使用有一段时间了，并且需要利用v-calendar组件，但我遇到了点击事件的问题。

简而言之，我希望允许用户单击月视图中日历上的空白区域来打开一个对话框来添加事件。我还希望用户单击事件槽并能够查看该事件的详细信息并将其删除。

我的问题在于，如果我在 v-calendar 组件上设置 @click:day="someMethod" ，那么当单击当天的空白以及单击事件槽时，它将触发该事件。

问题示例：codepen

<v-calendar
        :now="today"
        :value="today"
        color="primary"
        :type="selectedType"
        @click:day="(event)=>dateClick(event,true)"
      >
        <template v-slot:day="{ date }">
          <template v-for="event in eventsMap[date]">
            <v-menu
              :key="event.title"
              v-model="event.open"
              full-width
              offset-x
            >
              <template v-slot:activator="{ on }">
                <div
                  v-if="!event.time"
                  v-ripple
                  class="my-event"
                  v-on="on"
                  v-html="event.title"
                ></div>
              </template>
              <v-card
                color="grey lighten-4"
                min-width="350px"
                flat
              >
                <v-toolbar
                  color="primary"
                  dark
                >
                  <v-btn icon>
                    <v-icon>edit</v-icon>
                  </v-btn>
                  <v-toolbar-title v-html="event.title"></v-toolbar-title>
                  <v-spacer></v-spacer>
                  <v-btn icon>
                    <v-icon>favorite</v-icon>
                  </v-btn>
                  <v-btn icon>
                    <v-icon>more_vert</v-icon>
                  </v-btn>
                </v-toolbar>
                <v-card-title primary-title>
                  <span v-html="event.details"></span>
                </v-card-title>
                <v-card-actions>
                  <v-btn
                    flat
                    color="secondary"
                  >
                    Cancel
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-menu>
          </template>
        </template>
      </v-calendar>

我尝试过利用 VueJS 识别的事件子命令，但它们似乎不起作用。VueJS 事件

Answer 1

Even though the v-menu activator slot documentation states...

will activate the component when clicked (or hover for specific components). This manually stops the event propagation

I'm not entirely convinced that's the case.

更改您的激活器以专门绑定单击事件并停止传播似乎可行......

<template v-slot:activator="{ on }">
  <div
    v-if="!event.time"
    v-ripple
    class="my-event"
    v-on="on"
    @click.stop
    v-html="event.title"
  ></div>
</template>

这是这个问题的错误报告〜https ://github.com/vuetifyjs/vuetify/issues/3333