추가 Bootstrap popover가 프로그래밍 방식으로 vue-full-calendar.

추가 Bootstrap popover가 프로그래밍 방식으로 vue-full-calendar.

나의 최종 목표는 전체 캘린더에 달력 이벤트 설명 표시하고 해당 전망에 따라 이후 Title/description에서, 전체 캘린더를 Bootstrap 4팝오버를 넣는 것이다.이후 전체 달력 모든 것을 만들어 행사에서 prop 나는 그것에 따라, 어떻게 어떤 종류의 popover을 추가하는지 알아내는 것입니다.(나는 아마도 jQuery을 했지만 저는 정말로 숙제를 나의 작은 size을 짓게 만들기 위해 jQuery을 뚫어 보려고 할 수 있었던 것)수가 없었어요.

훌륭한 설명서 여기서 부트 스트랩 vue과 popover의 정상적인 사용에: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고 싶지만 그것은 팝오버 들어맞지 않아 후에 뷰, DOM을 처리하는 것 같아 특성을 더 추가되나.

있습니까 다른 방법이의 매개 변수를 사용하도록 만듭니다.info오브젝트는 팝오버를 추가하기 위해 eventRender 함수에 전달되었습니까?(eventRender 함수 문서:https://fullcalendar.io/docs/eventRender)

당신은 propsData에 의해 bootstrap-vue에 다음과 같: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

그래, 얼마이고 주변에서 놀고는 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>

언급URL:https://stackoverflow.com/questions/55838437/add-bootstrap-popover-programmatically-vue-full-calendar