以编程方式添加Bootstrap popover vue-full-calendar [英] Add Bootstrap popover programmatically vue-full-calendar

问题描述

我的最终目标是将Bootstrap 4 Popover添加到Full Calendar以显示日历事件描述，因为Full Calendar会根据视图切断标题/描述.由于完整日历会根据我传递给它的事件道具生成所有内容，因此我一直无法弄清楚如何添加任何种类的弹出窗口.(我可能可以使用jQuery来做到这一点，但我实际上是在尝试将jQuery从项目中删除，以使构建尺寸更小)

My end goal is to add a Bootstrap 4 Popover to Full Calendar to display calendar event descriptions, since depending on the view, Full Calendar cuts off the Title/description. Since Full Calendar is generating everything based off of the events prop I pass to it, I haven't been able to figure out how to add a popover of any sort. (I could probably do it with jQuery, but I'm really trying to cut jQuery out of the project to make my build size smaller)

这里有大量有关带有引导Vue的Popover正常用法的文档: https://bootstrap-vue.js.org/docs/directives/popover/

There is great documentation here on normal usage of the popover with bootstrap vue: https://bootstrap-vue.js.org/docs/directives/popover/

不幸的是，完整日历没有提供使用Boostrap-Vue文档中描述的任何方法的方法.我确实尝试过但没有奏效的一件事是

Full Calendar doesn't provide a way to use any of the methods described in the Boostrap-Vue docs unfortunately. One thing I did try, but didn't work was this

<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.

This does add the attribute to the HTML, but I assume it's after Vue processes the DOM, because it doesn't add the Popover.

是否还有其他方法可以使用传递给eventRender函数的 info 对象的参数来添加Popover?(eventRender函数文档: https://fullcalendar.io/docs/eventRender )

Would there be any other way to use the parameters of the info object passed to the eventRender function to add a Popover? (eventRender function docs: https://fullcalendar.io/docs/eventRender)

推荐答案

好吧，花了一些时间阅读Boostrap-Vue代码并进行了一些尝试之后，我才能够使它工作！

Ok, after spending some time reading the Boostrap-Vue code, and playing around a bit, I was able to get it working!

以下是该组件的精简版本，其中的PopOver工作正常:

Here's a condensed version of the component with the PopOver working:

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

这篇关于以编程方式添加Bootstrap popover vue-full-calendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！