Vuejs2 以编程方式添加引导popover vue完整日历

我的最终目标是在完整日历中添加一个bootstrap4popover来显示日历事件描述，因为根据视图的不同，“完整日历”会切断标题/描述。由于完整的日历是根据我传递给它的事件属性生成所有内容的，所以我一直不知道如何添加任何类型的popover。（我可能可以用jQuery来实现这一点，但我确实在尝试将jQuery从项目中删除，以使构建规模更小）

这里有大量关于popover与bootstrap vue正常使用的文档：

很遗憾，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>

从“@FullCalendar/vue”导入FullCalendar
导出默认值{
数据（）{
事件：[……]，
},
方法：{
eventRender（信息）{
info.el.setAttribute（'v-b-popover.hover.top'，'popover！'）
}
}
} 

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

---

是否有其他方法可以使用传递给eventRender函数的

info

对象的参数来添加Popover？（eventRender函数文档：）

好的，在花了一些时间阅读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>

从“@FullCalendar/vue”导入FullCalendar
从“bootstrap vue/src/utils/PopOver.class”导入PopOver
导出默认值{
数据（）{
事件：[……]，
},
方法：{
eventRender（信息）{
//PopOver类的配置
常量配置={
标题：“我是一个标题”，
内容：“此文本将显示在PopOver的正文中”，
位置：'自动'，//可以使用Popover的任何位置（顶部、底部、右侧、左侧等）
container:'null'，//可以在此处传入容器的id，其他方面只需将其附加到body
边界：'scrollParent'，
边界填充：5，
延迟：0，
偏移量：0，
动画：没错，
触发器：“悬停”，//可以是“单击”、“悬停”或“焦点”
html:false，//如果要将内容中的html设置为true。
}
const target=info.el；
consttoolpop=newpopover（目标，配置，this.$root）；
console.log（'TOOLPOP'，TOOLPOP）；
},
}
} 

您可以通过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是一个测试值