element 日历点击事件

element 日历组件是一个非常好用的日期选择工具，它提供了丰富的功能，包括快速选择日期范围、设置不可选日期等等。在实际应用中，我们经常需要对日历组件的点击事件进行定制化处理，使用户能够根据自己的业务需求完成特定的操作。

element 日历组件提供了丰富的点击事件，包括日期选择事件、快捷日期选择事件、面板取消事件、面板关闭事件等等。其中，最常用的是日期选择事件，该事件在用户选择日期后触发，并将所选日期的值作为参数传递给回调函数。

如果需要对日期选择事件进行定制化处理，首先需要在组件的属性中设置事件回调函数。例如，在 el-date-picker 组件中，我们可以通过设置 v-on:change 属性来监听日期选择事件，如下所示：

<el-date-picker v-model="date" v-on:change="onDateChange"></el-date-picker>

其中，v-model 绑定了一个 date 变量，该变量用于记录用户选择的日期；v-on:change 绑定了一个回调函数 onDateChange，该函数在用户选择日期后被调用。

接下来，我们需要在 onDateChange 函数中处理业务逻辑。例如，如果我们需要在选择日期后弹出一个提示框，可以使用 element-ui 中的 message 组件，代码如下所示：

onDateChange: function (value) {
  this.$message({
    type: 'success',
    message: '您选择的日期是：' + value
  })
}

在该代码中，我们使用 this.$message 函数弹出一个提示框，提示框的类型为 success，提示内容为“您选择的日期是：” + value，其中 value 是用户选择的日期值。

除了日期选择事件外，element 日历组件还提供了其它各种事件，可以根据实际需求进行选择，例如：

- v-on:pick：用户确定选择日期或时间时触发；
- v-on:clear：用户清空日期或时间时触发；
- v-on:shortcut：用户快捷选择日期范围时触发；
- v-on:panel-change：日历面板变化时触发；
- v-on:close：日历关闭时触发。

通过上述代码，我们可以看到 element 日历组件非常灵活，可以方便地实现各种业务需求。无论是选择日期、取消日期还是关闭面板，我们都可以通过监听相应的事件来实现定制化处理，进而为用户提供更好的交互体验。