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

【问题标题】：How do I add a popover to a fullcalendar event in a resource timeline in Vue using BootstrapVue?如何使用 BootstrapVue 在 Vue 的资源时间轴中将弹出框添加到完整日历事件？
【发布时间】：2020-10-06 08:01:49
【问题描述】：

我正在尝试向资源时间线中的事件添加弹出框，我想知道正确的方法是什么。

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

在日历选项中：

eventDidMount: function (info) {
    new BPopover({
        propsData: {
            title: info.event.extendedProps.title,
            content: info.event.extendedProps.projectName,
            triggers: 'hover',
            target: info.el,
        }
    }).$mount()
}

任何想法都非常感谢。
非常感谢。

【问题讨论】：

标签： javascript vue.js fullcalendar bootstrap-vue fullcalendar-5

【解决方案1】：

自从发布这个问题以来，我们已经在这个项目上从 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 中使用它的示例。

文档肯定会更好！

【讨论】：