Vue 和 Fullcalendar 自定义日期单元格

Question

我需要在每天的单元格中添加一个按钮。我知道我可以做类似的事情：

dayCellContent: {
  html: `<button> button text </button>`,
},

但我真的不想那样做，我更愿意使用我的按钮组件。同样像这样我将不得不添加没有 Vue 的点击监听器，我也不太喜欢它。

那么有更好的方法吗？最好只传入 Vue 组件？

Answer 1

我通过使用一个组件并像这样使用 Vue 构造函数初始化它来解决这个问题。

const el = document.createElement("a");
 const calendarDayCellContentContainer = new Vue({
        el,
        render: (h) =>
          h(CalendarDayCellContent, {
            props: {
              buttonText: "whatever",
            },
          }),
      });

并将按钮.$el 作为DOM 节点传递。

domNodes: [button.$el],

Vue 和 Fullcalendar 自定义日期单元格

Vue and Fullcalendar customizing day cell

fullcalendar

vue.js