el-calendar 详细使用方法

el-calendar 是一个基于 Element UI 的日历组件，提供了日历的显示、选择等功能。下面是 el-calendar 的详细使用方法：

1. 安装

使用 npm 安装 Element UI：

npm i element-ui -S

2. 引入

在需要使用 el-calendar 的组件中引入：

import { Calendar } from 'element-ui'
import 'element-ui/lib/theme-chalk/calendar.css'

3. 使用

在组件中使用 el-calendar：

<el-calendar v-model="date" :range="range" :first-day-of-week="1" :default-date="defaultDate" :disabled-date="disabledDate" :shortcuts="shortcuts" :show-week-numbers="true"></el-calendar>

其中，各个属性的含义如下：

- `v-model`：绑定当前选择的日期，支持双向数据绑定。
- `range`：指定可选择的日期范围，可以是一个数组，如 `['2021-01-01', '2021-12-31']`，也可以是一个返回值为数组的函数，如 `() => ['2021-01-01', '2021-12-31']`。
- `first-day-of-week`：指定每周的第一天，默认为 7，即周日。
- `default-date`：指定默认选中的日期，可以是一个字符串，如 `'2021-06-01'`，也可以是一个返回值为字符串的函数，如 `() => '2021-06-01'`。
- `disabled-date`：指定不可选的日期，可以是一个返回值为布尔值的函数，如 `date => date.getDay() === 0`，表示禁止选择周日。
- `shortcuts`：指定快捷选项，可以是一个数组，如 `[{ text: '最近一周', onClick: () => { /* ... */ } }]`。
- `show-week-numbers`：指定是否显示周数，默认为 false。

4. 事件

el-calendar 支持以下事件：

- `change`：当选中的日期发生变化时触发，回调函数接收一个参数，即当前选中的日期。
- `select`：当选择日期时触发，回调函数接收一个参数，即当前选中的日期。

<el-calendar v-model="date" @change="handleChange" @select="handleSelect"></el-calendar>

methods: {
  handleChange(date) {
    console.log('当前选中的日期：', date)
  },
  handleSelect(date) {
    console.log('选择的日期：', date)
  }
}

5. 其他

el-calendar 还支持以下方法：

- `prevMonth`：切换到上一个月。
- `nextMonth`：切换到下一个月。

<el-calendar ref="calendar"></el-calendar>
<button @click="$refs.calendar.prevMonth()">上一个月</button>
<button @click="$refs.calendar.nextMonth()">下一个月</button>