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

【问题标题】：How to suppress @click:day for v-calendar when clicking an event slot item?单击事件槽项时如何抑制 v-calendar 的 @click:day？
【发布时间】：2019-12-08 08:56:11
【问题描述】：

我已经将 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 Events

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

即使v-menu activator slot documentation 声明...

将在单击时激活组件（或悬停在特定组件上）。 这会手动停止事件传播

我并不完全相信是这样的。

更改您的激活器以专门绑定一个停止传播的点击事件似乎有效...

<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

【讨论】：

谢谢！我分叉了我最初的问题并添加了您的 1 行解决方案并得到了它:) 我从未考虑在激活器上添加停止事件，因为它看起来像是日期的日历点击首先触发。再次感谢！对于那些希望看到原始问题现在正在运行的人：Codepen-fixed

【解决方案2】：

在showEvent 方法的末尾使用nativeEvent.stopPropagation()。

看看vuetify example。

【讨论】：

【解决方案3】：

便宜的解决方法是使用@contextmenu:day 而不是@click。在这种情况下，您可以右键单击空白区域来添加新事件。当然这不是你想要的，但仍然如此。

【讨论】：

感谢您的建议！我正在考虑将其作为替代方案，但该人在当天点击空白区域时确实想要它。