Question

我将需要在工具提示内容中添加@click事件处理程序。因此用户可以单击工具提示以获取更多详细信息。

仅编写@click无效。

在此处显示完整的日历代码，我使用eventRender事件附加工具提示。

<FullCalendar
      ref="fullCalendar"
      :customButtons="this.customButtons"
      :eventLimit="this.config.eventLimit"
      :header="false"
      :events="events"
      :plugins="calendarPlugins"
      :defaultDate="date"
      @datesRender="setDatepickerValue"
      @eventRender="getEventDetailsPopup"
      defaultView="dayGridMonth"
    />

以及下面提到的事件呈现的事件处理程序代码

methods: {
    getEventDetailsPopup: function(mouseInfo) {
      var tooltip = new Tooltip(mouseInfo.el, {
        title: `
         <div class="container  max-w-sm mx-auto overlay cursor-pointer rounded">
         <div class="centered flex items-center m-4 w-full ">
          <div class="w-1/3 h-12 ">
             <i class="fa fa-heart" aria-hidden="true"></i>
                  <span class="text-white">0</span>
            </div>
            <div class="w-1/3 h-12">
              <i class="fa fa-comment" aria-hidden="true"></i>
              <span class="text-white">0</span>
            </div>
            <div class="w-1/3 h-12">
             <i class="fa fa-retweet" aria-hidden="true"></i>
             <span class="text-white">0</span>
            </div>
            <div class="w-1/3 h-12 ">
             <i class="fa fa-location-arrow" aria-hidden="true"></i>
             <span class="text-white">0</span>
            </div>

          </div>

         </div> 
         <div class="container bg-white max-w-1 mx-auto">   

          <div class="max-w-sm rounded overflow-hidden shadow-lg">
            <img
              class="w-full h-32"
              src="https://tailwindcss.com/img/card-top.jpg"
              alt="Sunset in the mountains"
            >
            <div class="px-6 py-4 ">
              <div class="font-bold text-xl mb-2">${mouseInfo.event.title}</div>
              <p class="text-gray-700 text-base">
                ${mouseInfo.event.extendedProps.description}
              </p>
            </div>
            <div class="px-6 py-2 bg-blue-900 h-9">
                <span class="inline-block bg-gray-200 rounded-full px-3 text-sm font-semibold text-gray-700 mr-2">
              Autoschedule</span>
            </div>
          </div>
        </div>`,
        placement: "right",
        trigger: "hover",
        html: true,
        container: "body",
        delay: { show: 100 },
        template: `<div class="tooltip calendar" role="tooltip">
          <div class="tooltip-arrow x-arrow"></div>
          <div class="tooltip-inner"></div>
        </div>`
      });
    },
    callEventDetailPopup: function() {
      console.log("called");
    },

需要在标题内容上添加点击处理程序。

Answer 1

尝试

<FullCalendar @eventClick="eventClick"  />

如何在工具提示标题内容中添加vue @click事件？

1 个答案: