Vue实现移动端日历的示例代码

Vue 实现移动端日历的示例代码可以分为以下几步：

步骤一：项目初始化

首先，我们需要创建一个 Vue 项目，并安装相关依赖：

# 创建 vue 项目
vue create my-app
cd my-app

# 安装依赖
npm install amfe-flexible vant -S

其中，amfe-flexible 是用于适配移动端屏幕大小，vant 是一套基于 Vue2 的组件库。

步骤二：创建日历组件

我们创建一个日历组件 Calendar，该组件包含年、月、日等信息，并通过 Vant 的 Calendar 组件实现日历的显示和交互。具体代码如下：

<template>
  <div class="calendar">
    <van-calendar
      :show-confirm="false"
      :formatter="formatter"
      :default-date="defaultDate"
      @click="onDateClick"
    />
  </div>
</template>

<script>
import { Calendar } from 'vant';

export default {
  name: 'Calendar',
  components: {
    [Calendar.name]: Calendar,
  },
  data() {
    return {
      defaultDate: new Date(),
    };
  },
  methods: {
    formatter(date) {
      const day = date.getDay();
      if (day === 0 || day === 6) {
        // 周末
        return {
          text: date.getDate().toString(),
          className: 'weekend',
        };
      } else {
        // 工作日
        return {
          text: date.getDate().toString(),
        };
      }
    },
    onDateClick(date) {
      console.log(date);
    },
  },
};
</script>

<style lang="scss" scoped>
.calendar {
  height: 100vh;
}
.weekend {
  color: red;
}
</style>

在这个组件中，我们通过引入 Vant 的 Calendar 组件来实现日历的显示和交互。通过设置 show-confirm 属性为 false 来隐藏确认按钮，然后通过 formatter 属性来自定义日期的显示格式。在 formatter 方法中，我们根据日期的星期几来判断日期是否是周末，然后设置不同的样式。最后，通过 onDateClick 方法来监听日期的点击事件。

步骤三：创建事件列表组件

接下来，我们创建一个事件列表组件 EventList，该组件用于显示每个日期对应的事件列表。具体代码如下：

<template>
  <div class="event-list">
    <div
      v-for="(events, date) in eventMap"
      :key="date"
      class="event-list__item"
    >
      <div class="event-list__date">{{ date }}</div>
      <div class="event-list__content">
        <div v-for="event in events" :key="event.id" class="event-list__event">
          <van-tag>{{ event.title }}</van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EventList',
  props: {
    eventList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    eventMap() {
      const map = {};
      this.eventList.forEach((event) => {
        const date = event.date.toLocaleDateString();
        if (!map[date]) {
          map[date] = [];
        }
        map[date].push(event);
      });
      return map;
    },
  },
};
</script>

<style lang="scss" scoped>
.event-list {
  padding: 16px;
}
.event-list__item {
  margin-bottom: 16px;
}
.event-list__date {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.event-list__content {
  display: flex;
  flex-wrap: wrap;
}
.event-list__event {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>

在这个组件中，我们通过使用 v-for 指令来遍历事件列表，并使用计算属性 eventMap 来将事件列表按照日期进行分类。最后，我们根据分类后的结果来动态渲染事件列表的 HTML 结构。

步骤四：集成日历和事件列表组件

最后，我们通过在父组件中引用 Calendar 和 EventList 组件来集成日历和事件列表组件。具体代码如下：

<template>
  <div>
    <Calendar />
    <EventList :eventList="eventList" />
  </div>
</template>

<script>
import Calendar from '@/components/Calendar';
import EventList from '@/components/EventList';

export default {
  name: 'App',
  components: {
    Calendar,
    EventList,
  },
  data() {
    return {
      eventList: [
        {
          id: 1,
          date: new Date('2021-07-01'),
          title: '开会',
        },
        {
          id: 2,
          date: new Date('2021-07-01'),
          title: '约饭',
        },
        {
          id: 3,
          date: new Date('2021-07-02'),
          title: '理发',
        },
      ],
    };
  },
};
</script>

在这个父组件中，我们通过在模板中引用 Calendar 和 EventList 组件，并将事件列表数据传递给 EventList 组件。最后，我们还需要在父组件中定义事件列表数据 eventList。这里我定义了三个事件，分别是 7 月 1 日的开会和约饭，以及 7 月 2 日的理发。

至此，Vue 实现移动端日历的示例代码完成。