vue FullCalendar 鼠标移入事件

Question

在vue中使用FullCalendar 如何使用鼠标移入事件

  <div class="calendar">
        <FullCalendar
          ref="fullCalendar"
          locale="zh"
          eventLimitText="查看所有"
          :fixedWeekCount="false"
          :showNonCurrentDates="false"
          :eventLimit="true"
          :allDaySlot="false"
          :weekends="true"
          :firstDay="1"
          :views="views"
          :plugins="plugins"
          :events="events"
          :datesRender="datesRender"
          :event-render="eventRender"
          @eventClick="handleEventClick"
          @dateClick="handleDateClick"
          @eventMouseover="onEventMouseover"
        />

  search() {
      this.events = [];
      const that = this;
      listByDate(this.params).then(res => {
        res.forEach(item => {
          let oneLevelList = item.outList.filter(out => out.outLevel === "3");
          let twoLevelList = item.outList.filter(out => out.outLevel === "2");
          let threeLevelList = item.outList.filter(out => out.outLevel === "1");

          if (threeLevelList != null && threeLevelList.length > 0) {
            let title3 = `<div class="danger">`;
            for (let out of threeLevelList) {
              let time =
                new Date(out.outCreateTime).format("HH:mm") +
                "-" +
                new Date(out.outEndTime).format("HH:mm");
              title3 += `${time} </br>`;
            }
            title3 += `</div>`;
            that.events.push({
              backgroundColor: "#fff",
              textColor: "#000",
              borderColor: "#fff",
              title: title3,
              start: item.outDate,
              extendedProps: { outList: threeLevelList }
            });
          }
         );
    }

我想在日历中实现鼠标移入移出事件

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

在 Vue 中使用 FullCalendar 组件实现鼠标移入和移出事件，你已经提供了一个非常好的示例。以下是一些补充和建议，以确保你的实现更加完善：

1. 确保 FullCalendar 插件支持：

   • 首先，确保你使用的 FullCalendar 版本支持 eventMouseover 和 eventMouseout 事件。虽然这些事件在 FullCalendar 的 API 文档中通常有提及，但不同版本的实现可能会有所不同。

2. 使用 eventRender 来处理鼠标事件：

   • 除了直接在模板中使用 @eventMouseover 和 @eventMouseout，你还可以使用 eventRender 属性来自定义事件的渲染，并在其中添加鼠标事件的监听。

3. 优化事件处理函数：

   • 确保你的事件处理函数能够正确处理传入的事件对象，并根据需要执行相应的操作。

4. 考虑使用 Vue 的计算属性或方法来处理事件数据：

   • 如果你的事件数据在鼠标移入和移出时需要进行复杂的处理，可以考虑使用 Vue 的计算属性或方法来管理这些数据。

以下是一些改进后的代码示例：

<template>
  <div class="calendar">
    <FullCalendar
      ref="fullCalendar"
      locale="zh"
      eventLimitText="查看所有"
      :fixedWeekCount="false"
      :showNonCurrentDates="false"
      :eventLimit="true"
      :allDaySlot="false"
      :weekends="true"
      :firstDay="1"
      :views="views"
      :plugins="plugins"
      :events="events"
      :datesRender="datesRender"
      :event-render="eventRender"
      @eventClick="handleEventClick"
      @dateClick="handleDateClick"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      events: [],
      views: {},
      plugins: [],
      hoveredEvent: null,
    };
  },
  methods: {
    search() {
      this.events = [];
      const that = this;
      listByDate(this.params).then(res => {
        res.forEach(item => {
          let oneLevelList = item.outList.filter(out => out.outLevel === "3");
          let twoLevelList = item.outList.filter(out => out.outLevel === "2");
          let threeLevelList = item.outList.filter(out => out.outLevel === "1");

          if (threeLevelList != null && threeLevelList.length > 0) {
            let title3 = `<div class="danger">`;
            for (let out of threeLevelList) {
              let time =
                new Date(out.outCreateTime).format("HH:mm") +
                "-" +
                new Date(out.outEndTime).format("HH:mm");
              title3 += `${time} </br>`;
            }
            title3 += `</div>`;
            that.events.push({
              backgroundColor: "#fff",
              textColor: "#000",
              borderColor: "#fff",
              title: title3,
              start: item.outDate,
              extendedProps: { outList: threeLevelList }
            });
          }
        });
      });
    },
    eventRender(info) {
      const { event } = info;
      const element = info.el;

      // 添加鼠标移入和移出事件
      element.addEventListener('mouseover', () => {
        this.hoveredEvent = event;
        console.log("鼠标移入事件", event);
      });
      element.addEventListener('mouseout', () => {
        this.hoveredEvent = null;
        console.log("鼠标移出事件", event);
      });

      return { element };
    },
    handleEventClick(event) {
      // 处理事件点击事件
    },
    handleDateClick(date) {
      // 处理日期点击事件
    },
    datesRender(info) {
      // 渲染日期
    },
  },
  mounted() {
    this.search();
  },
};
</script>

<style>
/* 样式 */
</style>

在这个示例中，我们使用了 eventRender 属性来自定义事件的渲染，并在其中添加了鼠标移入和移出事件的监听。这样可以更灵活地控制事件的显示和行为。同时，我们还使用了 hoveredEvent 数据属性来存储当前鼠标悬停的事件，以便在需要时访问。