Vue/Uni-App：空手撕日历

2023-11-05 02:21:56

在前端开发中，日历控件是一个非常重要的组件，它可以帮助用户选择日期、时间，也可以用于显示日程安排、事件提醒等信息。在 Vue/Uni-App 中，我们可以使用内置的日历组件，也可以自己动手开发一个日历控件。

一、使用内置日历组件

Vue/Uni-App 中提供了两个内置的日历组件：

mp-calendar：一个通用的日历组件，支持选择日期和时间，也可以显示日程安排等信息。
mp-date-picker：一个只支持选择日期的组件，比 mp-calendar 更简洁。

这两个组件的用法都非常简单，只需要在模板中声明，然后在组件中设置相关属性即可。例如：

<template>
  <mp-calendar :currentDate="currentDate"></mp-calendar>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    }
  }
}
</script>

二、自己开发日历控件

如果内置的日历组件不能满足我们的需求，我们也可以自己动手开发一个日历控件。这需要我们有一定的前端开发基础，但并不是很难。

1. 创建一个新的项目

首先，我们需要创建一个新的项目。可以使用 Vue CLI 或 Uni-App CLI 来创建一个项目。

vue create my-calendar

或者

uni-app create my-calendar

2. 安装依赖项

接下来，我们需要安装一些依赖项。

npm install dayjs

或者

yarn add dayjs

Dayjs 是一个轻量级的 JavaScript 日期库，我们可以用它来处理日期和时间。

3. 创建日历组件

然后，我们需要创建一个日历组件。在 src 目录下创建一个新的文件 Calendar.vue，并添加以下代码：

<template>
  <div class="calendar">
    <div class="calendar-header">
      <button @click="prevMonth">上个月</button>
      <span>{{ currentDate | format('YYYY年MM月') }}</span>
      <button @click="nextMonth">下个月</button>
    </div>
    <div class="calendar-body">
      <div class="calendar-week">
        <span>一</span>
        <span>二</span>
        <span>三</span>
        <span>四</span>
        <span>五</span>
        <span>六</span>
        <span>日</span>
      </div>
      <div class="calendar-days">
        <div v-for="day in days" :key="day" @click="selectDay(day)">
          {{ day }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data() {
    return {
      currentDate: dayjs(),
      days: []
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = this.currentDate.subtract(1, 'month')
      this.updateDays()
    },
    nextMonth() {
      this.currentDate = this.currentDate.add(1, 'month')
      this.updateDays()
    },
    selectDay(day) {
      this.$emit('select', day)
    },
    updateDays() {
      const startDay = this.currentDate.startOf('month').day()
      const endDay = this.currentDate.endOf('month').day()
      const days = []
      for (let i = 0; i < startDay; i++) {
        days.push('')
      }
      for (let i = 1; i <= endDay; i++) {
        days.push(i)
      }
      this.days = days
    }
  },
  mounted() {
    this.updateDays()
  }
}
</script>

<style>
.calendar {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.calendar-header button {
  border: none;
  background: none;
  cursor: pointer;
}

.calendar-body {
  padding: 10px;
}

.calendar-week {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.calendar-week span {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
}

.calendar-days {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.calendar-days div {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  cursor: pointer;
}

.calendar-days div:hover {
  background: #eee;
}

.calendar-days div.selected {
  background: #007bff;
  color: #fff;
}
</style>

4. 在项目中使用日历组件

在 App.vue 文件中，导入日历组件，然后在模板中使用它：

<template>
  <div>
    <Calendar @select="handleSelect"></Calendar>
  </div>
</template>

<script>
import Calendar from './components/Calendar.vue'

export default {
  components: {
    Calendar
  },
  methods: {
    handleSelect(day) {
      console.log(day)
    }
  }
}
</script>