以编程方式添加 Bootstrap 弹出窗口 vue-full-calendar

Question

我的最终目标是向完整日历添加 Bootstrap 4 弹出窗口以显示日历事件描述，因为根据视图，完整日历会截断 Title/description。由于 Full Calendar 是根据我传递给它的 events 属性生成所有内容的，所以我一直无法弄清楚如何添加任何类型的弹出窗口。（我可能可以用 jQuery 做到这一点，但我真的想从项目中删除 jQuery 以使我的构建大小更小）

这里有关于 bootstrap vue 弹出窗口正常使用的很棒的文档：https://bootstrap-vue.js.org/docs/directives/popover/

很遗憾，Full Calendar 不提供使用 Boostrap-Vue 文档中描述的任何方法的方法。我确实尝试过但没有奏效的一件事是这个

<template>
  <full-calendar
    :events="events"
    @eventRender="eventRender"
  ></full-calendar>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue'

  export default{
    data(){
      events: [...],
    },
    methods: {
      eventRender(info){
        info.el.setAttribute('v-b-popover.hover.top', 'Popover!')
      }
    }
  } 
</script>

这确实将属性添加到 HTML，但我假设它是在 Vue 处理 DOM 之后，因为它没有添加 Popover。

有没有其他方法可以使用传递给eventRender函数的info对象的参数来添加一个Popover？（eventRender 函数文档：https://fullcalendar.io/docs/eventRender）

Answer 1

好的，在花了一些时间阅读 Boostrap-Vue 代码并尝试了一下之后，我能够让它工作了！

这是使用 PopOver 工作的组件的压缩版本：

<template>
  <full-calendar
    :events="events"
    @eventRender="eventRender"
  ></full-calendar>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue'
  import PopOver from 'bootstrap-vue/src/utils/popover.class'

  export default{
    data(){
      events: [...],
    },
    methods: {
      eventRender(info){
        // CONFIG FOR THE PopOver CLASS
        const config = {
          title: 'I am a title',
          content: "This text will show up in the body of the PopOver",
          placement: 'auto', // can use any of Popover's placements(top, bottom, right, left etc)
          container: 'null', // can pass in the id of a container here, other wise just appends to body
          boundary: 'scrollParent',
          boundaryPadding: 5,
          delay: 0,
          offset: 0,
          animation:true,
          trigger: 'hover', // can be 'click', 'hover' or 'focus'
          html: false, // if you want HTML in your content set to true.
        }

        const target = info.el;
        const toolpop = new PopOver(target, config, this.$root);

        console.log('TOOLPOP', toolpop);
      },
    }
  } 
</script>

Answer 2

可以通过bootstrap-vue中的propsData获取BPopover如下：

import { BPopover } from 'bootstrap-vue'
...
methods: {
  ...
  onEventRender: function (args) {
    //console.log(args)
    let titleStr = 'xxxx'
    let contentStr = 'xxxx'

    new BPopover({propsData: {
      title: titleStr,
      content: contentStr,
      placement: 'auto',
      boundary: 'scrollParent',
      boundaryPadding: 5,
      delay: 500,
      offset: 0,
      triggers: 'hover',
      html: true,
      target: args.el,
    }}).$mount()
  }
}

尽管 propsData 是测试值...https://vuejs.org/v2/api/index.html#propsData

以编程方式添加 Bootstrap 弹出窗口 vue-full-calendar

Add Bootstrap popover programmatically vue-full-calendar

vuejs2

fullcalendar

bootstrap-vue

bootstrap-popover

fullcalendar-4