首页 > 解决方案 > Vuetify Calander

问题描述

我将 vue 日历与 vuetify 版本 2.1.x 一起使用。

当我们单击它时,我想从特定插槽中获取时间,所以我这样做:@click:time="test"

<v-calendar
  ref="calendar"
  :locale="$i18n.locale"
  v-model="schedulerObj.calViewValue"
  :weekdays="weekday"
  :type="type"
  :events="events"
  :event-overlap-mode="mode"
  :event-overlap-threshold="30"
  :event-color="getEventColor"
  :interval-minutes="schedulerObj.intervalDuration"
  @click:time="test"
>
</v-calendar>

但是当我的“测试”函数被调用时,它会给出没有小时数的事件/对象。它仅在 vuetify 2.1.x 中,而不是在以前的版本中。

标签: vue.jsvuetify.js

解决方案


你必须从它返回的对象中销毁你需要的任何东西。是说明。正如vuetify doc 中的说明所说:

日视图中特定时间的点击事件。传递的事件是日期和时间对象。

这是整个对象:

{
  date: string,
  time: string,
  year: number,
  month: number,
  day: number,
  hour: number,
  minute: number,
  weekday: number,
  hasDay: boolean,
  hasTime: boolean,
  past: boolean,
  present: boolean,
  future: boolean,
  timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false,
  timeDelta: (time: string | number | {hour: number, minute: number}): number | false,
  minutesToPixels: (minutes: number): number,
  week: [
    {
      date: string,
      time: string,
      year: number,
      month: number,
      day: number,
      hour: number,
      minute: number,
      weekday: number,
      hasDay: boolean,
      hasTime: boolean,
      past: boolean,
      present: boolean,
      future: boolean
    }
  ]
}

推荐阅读