加载 vue 组件并获取 HTML 作为全日历的字符串

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 组件作为模板并将事件数据传递给它，并为中所示的日历条目返回一个 HTML 字符串全日历。

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

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

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

Answer 1

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

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

然后在eventRender-callback中创建一个class的实例，传递数据并得到HTML-string

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 作为全日历的字符串

Load vue component and get HTML as string for fullcalendar

javascript

fullcalendar

vue.js

vuejs2