如何使用 BootstrapVue 在 Vue 的资源时间线中向全日历事件添加弹出窗口?
How do I add a popover to a fullcalendar event in a resource timeline in Vue using BootstrapVue?
我正在尝试向资源时间线中的事件添加弹出窗口,我想知道正确的方法是什么。
我在 Vue 中使用 fullcalendar/vue ^5.3.1 ^2.6.11 和 bootstrap-vue 的 ^2.1.0。
阅读后 我有以下内容,这似乎有效,但似乎不是正确的方法。
我认为正是 propsData
和 .$mount()
的使用让人感觉必须有更好、更惯用的方法?另外,内容好像也不行html?
在组件中:
<script>
import { BPopover } from 'bootstrap-vue'
</script>
在日历选项中:
eventDidMount: function (info) {
new BPopover({
propsData: {
title: info.event.extendedProps.title,
content: info.event.extendedProps.projectName,
triggers: 'hover',
target: info.el,
}
}).$mount()
}
非常感谢任何想法。
非常感谢。
自发布此问题以来,我们已从 bootstrap-vue 切换到此项目的 vuetify,但解决方案仍然很可能相关,因为我们使用 eventContent
插槽添加了一个v-tooltip
<FullCalendar :options="calendarOptions" ref="fullCalendar">
<template #eventContent="arg">
<v-tooltip bottom color="teal">
<template v-slot:activator="{ on, attrs }">
<div style="min-height:20px;" v-bind="attrs" v-on="on">
</div>
</template>
<div style="text-align:left;">
Description: {{arg.event.extendedProps.description}}<br />
Project {{arg.event.extendedProps.projectName}}<br />
</div>
</v-tooltip>
</template>
</FullCalendar>
我认为插槽是 v5 的新功能。我也在 this issue and you can see an example of it being used in the demo app 中遇到过这个。
文档绝对可以做得更好!
我正在尝试向资源时间线中的事件添加弹出窗口,我想知道正确的方法是什么。
我在 Vue 中使用 fullcalendar/vue ^5.3.1 ^2.6.11 和 bootstrap-vue 的 ^2.1.0。
阅读后
我认为正是 propsData
和 .$mount()
的使用让人感觉必须有更好、更惯用的方法?另外,内容好像也不行html?
在组件中:
<script>
import { BPopover } from 'bootstrap-vue'
</script>
在日历选项中:
eventDidMount: function (info) {
new BPopover({
propsData: {
title: info.event.extendedProps.title,
content: info.event.extendedProps.projectName,
triggers: 'hover',
target: info.el,
}
}).$mount()
}
非常感谢任何想法。
非常感谢。
自发布此问题以来,我们已从 bootstrap-vue 切换到此项目的 vuetify,但解决方案仍然很可能相关,因为我们使用 eventContent
插槽添加了一个v-tooltip
<FullCalendar :options="calendarOptions" ref="fullCalendar">
<template #eventContent="arg">
<v-tooltip bottom color="teal">
<template v-slot:activator="{ on, attrs }">
<div style="min-height:20px;" v-bind="attrs" v-on="on">
</div>
</template>
<div style="text-align:left;">
Description: {{arg.event.extendedProps.description}}<br />
Project {{arg.event.extendedProps.projectName}}<br />
</div>
</v-tooltip>
</template>
</FullCalendar>
我认为插槽是 v5 的新功能。我也在 this issue and you can see an example of it being used in the demo app 中遇到过这个。
文档绝对可以做得更好!