vue3打卡日历_vue3 日历签到

Vue3 打卡日历是一个基于 Vue3 开发的日历组件，可以方便地展示月视图和周视图，并支持日历签到功能。

首先，在你的 Vue3 项目中安装 `vue3-calendar`：

npm i vue3-calendar

然后在需要使用日历组件的地方引入：

<template>
  <div>
    <Calendar :events="events" :signed="signed" @event-click="onEventClick" @date-click="onDateClick" />
  </div>
</template>

<script>
import Calendar from 'vue3-calendar'

export default {
  components: {
    Calendar
  },
  data () {
    return {
      events: [
        { title: 'Event 1', date: '2022-01-01' },
        { title: 'Event 2', date: '2022-01-15' },
        { title: 'Event 3', date: '2022-01-20' }
      ],
      signed: ['2022-01-01', '2022-01-15']
    }
  },
  methods: {
    onEventClick (event) {
      console.log(event)
    },
    onDateClick (date) {
      console.log(date)
    }
  }
}
</script>

在上面的代码中，我们将 `vue3-calendar` 引入并注册为 `Calendar` 组件。然后在模板中使用 `<Calendar>` 标签，并传入两个属性：

- `events`：用于指定日历上显示的事件列表，每个事件包含 `title` 和 `date` 两个属性；
- `signed`：用于指定哪些日期已经签到。

`<Calendar>` 组件还提供了两个事件：

- `event-click`：当用户点击某个事件时触发，可以通过 `$event` 参数获取被点击的事件信息；
- `date-click`：当用户点击某个日期时触发，可以通过 `$event` 参数获取被点击的日期信息。

最后，你需要在样式中引入日历组件的 CSS 文件：

<style>
@import 'vue3-calendar/dist/vue3-calendar.css';
</style>