时间戳

首页 > 解决方案 > 如何在插槽中获取类别值（Vuetify 日历）

javascript - 如何在插槽中获取类别值（Vuetify 日历）

问题描述

我无法弄清楚如何在正文部分（插槽day-body）的 Vuetify 日历的类别视图中具有悬停功能。现在，当我实现悬停功能时，整行都有悬停，但我只悬停在一个类别上。周、日和 4 天等其他所有内容都正常工作，因为我可以单独获取date,week并timeToY从day-body插槽中获取。

<template v-slot:day-body="{ date, timeToY }">
  <div :class="{ hover: isHover && date === hoverDate }"
       :style="{ top: `${timeToY(hoverY)}px` }">
     <p class="mt-2 ml-2">{{ hoverY }}</p>
  </div>
</template>

这是我正在使用的 HTML 以及这两个事件@mousemove:time="hoverToSeeTime"和@mouseleave:time="removeHover". 在我分配的 mousemove 处理程序isHover中，hoverDate和hoverY。但我无法掌握如何使单个类别图块可悬停，因为day-body插槽没有类别键。我错过了什么吗？

提前致谢。

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

使用@mousemove:time-categoryand@mouseleave:time-category代替，并且category将在事件处理程序中可用。然后您可以设置 ahoverCategory以及其他hover属性：

hoverToSeeTime({ date, time, category }) {
   ...
   this.hoverCategory = category;
   ...
}

category在插槽道具中可用：

<template v-slot:day-body="{ date, week, timeToY, category }">

因此，您可以在插槽模板中比较两者。调整该模板以v-if在 div 上使用 a 而不是条件类：

<template v-slot:day-body="{ date, week, timeToY, category }">
   <div v-if="category == hoverCategory && date === hoverDate"
       class="hover" :style="{ top: `${timeToY(hoverY)}px` }"
   >
      <p class="mt-2 ml-2">{{ hoverY }}</p>
   </div>
</template>

这是一个更新的代码笔

推荐阅读