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 Events

Answer 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

Answer 2

便宜的解决方法是您使用@contextmenu：day而不是@click。在这种情况下，您可以在空白处单击鼠标右键以添加新事件。当然，这不是您要的，但是仍然。

Answer 3

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

看看vuetify example。

点击事件时段项目时如何隐藏@click：day的v-calendar？

3 个答案: