如何使用BootstrapVue将弹出框添加到Vue中的资源时间轴中的全日历事件？

问题描述

我正在尝试在资源时间轴中向事件添加弹出窗口，我想知道这样做的正确方法。

我在Vue ^ 2.6.11中使用fullcalendar / vue ^ 5.3.1，在bootstrap-vue中使用^ 2.1.0。

在阅读this question之后，我发现以下内容似乎可行，但似乎并不是正确的方法。

我认为是propsData和.$mount()的使用使我们感到必须采用更好，更惯用的方法？另外，似乎也无法将内容设置为html？

在组件中：

<script>
    import { BPopover } from 'bootstrap-vue'
</script>

在calendarOptions中：

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中遇到了这个问题，您也可以在demo app中看到它的使用示例。

文档肯定会更好！