Vue3.0+TypeScript实现简洁日历

2023-12-15 13:00:50

前言

Vue3.0作为前端框架的最新版本，拥有更强大的API和更灵活的开发体验。结合TypeScript，我们可以构建出更加健壮和可维护的应用程序。在这篇文章中，我们将使用Vue3.0和TypeScript来构建一个简易的日历，帮助你快速创建一个交互式日期选择器。

正文

1. 项目初始化

首先，我们需要创建一个新的Vue项目。可以使用Vue CLI工具快速完成这一步：

vue create my-calendar

2. 安装必要的依赖项

接下来，我们需要安装必要的依赖项。我们将使用Vue3.0和TypeScript进行开发，因此需要安装以下依赖项：

npm install vue@3.0.0-rc.11 typescript @vue/compiler-sfc @vue/reactivity @vue/runtime-dom

3. 配置TypeScript

在项目的根目录下创建tsconfig.json文件，并添加以下配置：

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

4. 创建日历组件

现在，我们可以创建日历组件了。在src目录下创建一个Calendar.vue文件，并添加以下代码：

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

<script>
import { ref, computed, watch } from '@vue/reactivity'

export default {
  setup() {
    const year = ref(new Date().getFullYear())
    const month = ref(new Date().getMonth() + 1)
    const selectedDay = ref(new Date().getDate())

    const days = computed(() => {
      const firstDay = new Date(year.value, month.value - 1, 1)
      const lastDay = new Date(year.value, month.value, 0)
      const daysInMonth = lastDay.getDate()

      const daysArray = []
      for (let i = 1; i <= daysInMonth; i++) {
        daysArray.push(i)
      }

      return daysArray
    })

    const prevMonth = () => {
      month.value--
      if (month.value < 1) {
        month.value = 12
        year.value--
      }
    }

    const nextMonth = () => {
      month.value++
      if (month.value > 12) {
        month.value = 1
        year.value++
      }
    }

    const selectDay = (day) => {
      selectedDay.value = day
    }

    watch([year, month], () => {
      console.log('年份或月份改变了')
    })

    return {
      year,
      month,
      selectedDay,
      days,
      prevMonth,
      nextMonth,
      selectDay
    }
  }
}
</script>

<style>
.calendar {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.header span {
  font-size: 16px;
}

.body {
  margin-top: 10px;
}

.week {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.days {
  display: flex;
  flex-wrap: wrap;
}

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

.active {
  background-color: #ccc;
}
</style>

5. 在App.vue中使用日历组件

现在，我们可以在App.vue中使用日历组件了。在App.vue文件中添加以下代码：

<template>
  <div id="app">
    <Calendar />
  </div>
</template>

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

export default {
  components: {
    Calendar
  }
}
</script>