Question

请看看我的方法，并告诉我在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”是好的，因为我是第一次使用它。

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

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

谢谢您的建议。

（全日历4个VueJ）在日历标题内添加自定义元素

0 个答案: