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

【问题标题】：How to add vue @click event in tooltip title content?如何在工具提示标题内容中添加 vue @click 事件？
【发布时间】：2020-05-18 02:17:25
【问题描述】：

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

只写@click 是行不通的。

Vue 完整的日历代码在这里我使用 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");
    },

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

【问题讨论】：

标签： vue.js fullcalendar tooltip

【解决方案1】：

试试这个

<FullCalendar @eventClick="eventClick"  />

【讨论】：

对您的答案进行一些解释以被视为答案是适当的
虽然此代码可能提供问题的解决方案，但强烈建议您提供有关此代码为何和/或如何回答问题的附加上下文。从长远来看，只有代码的答案通常会变得毫无用处，因为未来遇到类似问题的观众无法理解解决方案背后的原因。