如何使用 BootstrapVue 向 Vue 資源時間線中的完整日歷事件添加彈出框？

Question

我正在嘗試向資源時間線中的事件添加一個彈出框，我想知道這樣做的正確方法是什么。

我在 Vue ^2.6.11 中使用 fullcalendar/vue ^5.3.1 和 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()
}

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

Answer 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 功能。 我在這個問題中遇到了這個問題，你也可以看到它在演示應用程序中使用的一個例子。

文檔肯定會更好！