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

问题描述

我的最终目标是将 Bootstrap 4 Popover 添加到完整日历以显示日历事件描述，因为根据视图，完整日历会切断标题/描述.由于完整日历根据我传递给它的事件道具生成所有内容，因此我无法弄清楚如何添加任何类型的弹出框.(我可能可以用 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)

这里有很好的文档介绍了 bootstrap vue 弹出框的正常使用: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屋！