슬롯에서 카테고리 값을 가져오는 방법(일정관리 설정)

슬롯에서 카테고리 값을 가져오는 방법(일정관리 설정)

신체 부위(슬롯)의 Vuetify 달력 범주 보기에서 호버 기능을 사용하는 방법을 찾는 데 문제가 있음day-body내가 호버 기능을 구현하면 전체 행에 호버가 있지만 나는 하나의 범주에서만 맴돌고 있다.주, 주, 주, 주 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". 내가 할당한 마우스 이동 핸들러에서isHover,hoverDate그리고hoverY. 그러나 슬롯에 카테고리 키가 없기 때문에 개별 카테고리 타일을 어떻게 호버블링으로 만드는지 알 수 없다. 내가 뭐 놓친 거 있어?

미리 고맙다.

사용하다@mousemove:time-category그리고@mouseleave:time-category대신에 그리고category이벤트 핸들러에서 사용할 수 있다.그런 다음 a를 설정할 수 있다.hoverCategory다른 것과 함께hover속성:

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

category슬롯 소품에서 사용 가능:

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

슬롯 템플릿에 있는 두 가지를 비교해 보십시오.이 템플릿을 사용하여v-if조건부 클래스 대신 div:

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

여기 업데이트된 코드펜이 있다.

참조URL: https://stackoverflow.com/questions/65154675/how-to-get-category-value-in-slot-vuetify-calendar