Question

在全日历中，我使用eventRender来操纵日历条目的显示。

eventRender: function(event, element) {
      let eventDetails = "<div style='background-color:black'>"+event.title+"</div>";
      element.find(".fc-title").html(eventDetails);
    }

我不想像上面那样创建字符串模板，而是要使用Vue组件作为模板，并将事件数据传递给它，并获得HTML字符串以返回全日历中显示的日历条目。

我试图找出方法，但无法找出如何加载组件，传递数据并获取HTML字符串。

我已经设置了一个codeandbox，希望有人能帮助我。在“组件”文件夹中，您会找到Calendar.vue（完整日历）和EventDetails.vue（将用作模板的组件）。

https://codesandbox.io/s/vue-fullcalendar-example-vzwlo

Answer 1

导入组件并从中创建一个类

import EventDetails from "/components/EventDetails.vue";
var EventDetailsClass = Vue.extend(EventDetails);

然后在eventRender-callback中创建该类的实例，传递数据并获取HTML字符串

eventRender: (event, element) => {
          /** load EventDetails-component and pass data to component */
          /** return HTML-string from component */
          let EventDetailsInstance = new EventDetailsClass();
          EventDetailsInstance.setEvent(event);
          EventDetailsInstance.$mount();

          let eventHTML = EventDetailsInstance.$el.outerHTML;
          element.find(".fc-title").html(eventHTML);
        }

演示可在此处找到https://codesandbox.io/s/vue-fullcalendar-example-pqctv

加载vue组件并获取HTML作为fullcalendar的字符串

1 个答案: