javascript - 如何使用 BootstrapVue 在 Vue 中的资源时间轴中将弹出框添加到完整日历事件?
问题描述
我正在尝试向资源时间线中的事件添加弹出框,我想知道正确的方法是什么。
我在 Vue ^2.6.11 中使用 fullcalendar/vue ^5.3.1 和 bootstrap-vue 的 ^2.1.0。
阅读此问题后,我有以下内容,这似乎有效,但似乎不是正确的方法。
我认为是propsData
and的使用.$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 功能。我在这个问题中遇到了这个问题,您也可以看到它在演示应用程序中使用的示例。
文档肯定会更好!
推荐阅读
- java - 我如何将多个数组位置及其项目传递给下一个活动并进入下一个活动
- angular - Material Design中如何设计轮播
- database - 如何在 Yii2 中手动在数据库中创建用户?
- vulkan - 当设备未启用几何着色器功能时,vkQueueSubmit() 调用包括一个设置了 VK_PIPELINE_STAGE_GEOMETRY_SHADER_BIT 位的 stageMask
- c++ - arduino count++ 是否有限制以及如何解决?
- c# - 访问图像文件时抛出 UnauthorizedAccessException
- java - @Qualifier 在春季 5.0.6 中不起作用
- python - 谷歌应用引擎python中的EmailMessage类不起作用?
- angular - ngx-loading 未通过 Angular 5 中的服务加载
- spring - 在事务之外访问数据的模式