时间戳

首页 > 解决方案 > （Fullcalendar 4 VueJs）在日历标题中添加自定义元素

fullcalendar - （Fullcalendar 4 VueJs）在日历标题中添加自定义元素

问题描述

请看看我的方法并告诉我在 Fullcalendar 标头中添加复杂的 DOM 元素是否是一种好/正确的方法。

   viewSkeletonRender(info){

    this.$refs.fullCalendar.$el.querySelector('.fc-header-toolbar').insertAdjacentHTML('afterbegin', `
      <div class="event_create-wrap">
        <div class="event_create-btn">
          <div class="event_create-btn-left">
            Create
          </div>
          <div class="event_create-dropdown">
            <button class="event_create-btn-dropdown" @click="eventDropdownClicked">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M111 13.8822L3.62734 8.39658C3.23555 8.01742 3.23555 7.40432 3.62734 7.0292L4.5693 6.11762C4.96109 5.73846 5.59462 5.73846 5.98224 6.11762L10.0002 10.006L14.0181 6.11762C14.4099 5.73846 15.0434 5.73846 15.431 6.11762L16.373 7.0292C16.7648 7.40836 16.7648 8.02146 16.373 8.39658L10.7045 13.8822C10.3211 14.2614 9.68756 14.2614 9.29578 13.8822Z" fill="white"/>
              </svg>
            </button>
            <div class="event_create-btn-dropdown-content" :class="{show: isEventListShown}">
              <a href="">1</a>
              <a href="">2</a>
              <a href="">3</a>
            </div>
          </div>
        </div>
      </div>
    `);
  }

我正在使用“viewSkeletonRender”钩子，但我不确定使用“insertAdjacentHTML”是否很好，因为我第一次使用它。

  1. 我不能使用 AppendChild，因为我需要在那里添加这么多的 html 代码，并且很难逐步创建所有 html 对象（如果我需要添加 100 个 html 标签怎么办......）。
  2. 我不能使用 innerHtml 因为它会删除我在 fc-header-toolbar 中的所有内容。

据我了解，我无法使用这种方法将任何 VueJs 道具和方法绑定到这个 HTML，因为我将此 html 添加为 vanila Js。

感谢您的意见。

标签： fullcalendarfullcalendar-4

解决方案

推荐阅读