Добавить Bootstrap popover программно vue-full-calendar - PullRequest
Новая
       24

Добавить Bootstrap popover программно vue-full-calendar

1 голос
/ 24 апреля 2019

Моя конечная цель - добавить всплывающее окно Bootstrap 4 в полный календарь для отображения описаний событий календаря, поскольку в зависимости от представления полный календарь обрезает заголовок / описание. Поскольку полный календарь генерирует все, основываясь на событиях, которые я передаю, я не смог понять, как добавить всплывающее окно любого типа. (Возможно, я мог бы сделать это с помощью jQuery, но я действительно пытаюсь вырезать jQuery из проекта, чтобы уменьшить размер моей сборки)

Здесь есть отличная документация по обычному использованию popover с загрузчиком vue: https://bootstrap -vue.js.org / docs / directives / popover /

Полный календарь, к сожалению, не позволяет использовать ни один из методов, описанных в документации 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.

Есть ли другой способ использовать параметры объекта info, переданные в функцию eventRender, для добавления Popover? (Документация по функциям EventRender: https://fullcalendar.io/docs/eventRender)

1 Ответ

1 голос
/ 25 апреля 2019

Хорошо, потратив некоторое время на чтение кода 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>

Я надеюсь, что это поможет кому-то еще в будущем!

...