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

Question

我在我的 Vue 应用程序中使用https://fullcalendar.io/ 。

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

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

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

我试图弄清楚如何去做，但无法弄清楚如何加载组件、传递数据并返回一个 HTML 字符串。

我已经设置了一个codeandbox，希望有人可以帮助我。 在“components”文件夹中，您将找到 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