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

【问题标题】：How to get category value in slot (Vuetify calendar)如何在插槽中获取类别值（Vuetify 日历）
【发布时间】：2021-03-17 03:54:10
【问题描述】：

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

<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 插槽没有类别键。我错过了什么吗？

提前致谢。

【问题讨论】：

day-body 确实有 category 键。您可以在codepen.io 或codesandbox.io 上发布问题的重现吗？
当然，刚刚在 codepen here 中实现。请将鼠标悬停在日历正文上以查看问题。

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

请改用@mousemove:time-category 和@mouseleave:time-category，category 将在事件处理程序中可用。然后你可以设置hoverCategory 和其他hover 属性：

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

category 在插槽道具中可用：

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

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

<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>

Here 是更新的密码笔

【讨论】：