如何解决将鼠标悬停在全日历项目上时显示 b-popover
我在我的 Vue (nuxt) 应用程序中结合使用 bootstrap vue popover 和 Fullcalendar (v5)。
根据bootstrap vue的popover文档,挂载前需要挂载到唯一ID。
但是,例如,当我的日历在“月”视图中并且跨越 2 个月或更长时间时, eventContent() 事件将被触发两次(在此示例中为每周一次)。因此我没有唯一的 ID 来绑定弹出框。
这是我的代码:
<template>
<div>
<FullCalendar v-if="mounted" :options="calendarOptions" />
<b-popover
v-for="item of calendarItems"
:key="'popover_'+item.id"
:target="'item_'+item.id"
triggers="hover"
container="page-container"
placement="bottomleft"
>
<calendar-item-popover-content :calendar-item="item" />
</b-popover>
</div>
</template>
这是为日历项设置 ID 的事件,该 ID 与 calendarItems id 匹配。
eventContent (args) {
if (args.event.extendedProps) {
let props = args.event.extendedProps
let titleHtml = document.createElement('div')
let startTime = new Date(args.event.start)
let startHours = startTime.getHours() < 10 ? `0${startTime.getHours()}` : startTime.getHours()
let startMinutes = startTime.getMinutes() < 10 ? `0${startTime.getMinutes()}` : startTime.getMinutes()
let endTime = new Date(args.event.end)
let endHours = endTime.getHours() < 10 ? `0${endTime.getHours()}` : endTime.getHours()
let endMinutes = endTime.getMinutes() < 10 ? `0${endTime.getMinutes()}` : endTime.getMinutes()
if (props.title) {
titleHtml.innerHTML = `<p class="calendar-custom-text mb-0" id="item_${args.event.id}"><span class="calendar-item-type-dot" style="background-color: ${props.borderColor}"></span> <span class="calendar-item-time">${startHours}:${startMinutes}</span> <span class="calendar-item-title font-weight-bold">${props.title ? props.title : ''}</span></p>`
} else {
titleHtml.innerHTML = `<p class="calendar-custom-text mb-0" id="item_${args.event.id}"><span class="calendar-item-type-dot" style="background-color: ${props.borderColor}"></span> <span class="calendar-item-time">${startHours}:${startMinutes} - ${endHours}:${endMinutes}</span></p>`
}
let arrayOfDomNodes = [titleHtml]
return { domNodes: arrayOfDomNodes }
}
},
但是,当一个日历项跨越多个星期时,上面的这个方法会在每个星期启动,因此会有多个元素具有相同的 ID,并且无法绑定弹出框。
在 eventContent 函数中执行 console.log() 时,有问题的事件数据的示例如下所示:
如屏幕截图所示,此事件持续 3 周,在 eventContent 函数中,这将全部视为具有相同 ID 的单个事件。因此,当创建一个 b-popover 并将其附加到 event.id 时,只有第一周(从屏幕截图中的 8 到 14)会在悬停时具有弹出效果,其他 2 周没有。 (因为他们共享相同的 ID)
我该如何解决这个问题?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。