vue3 el-date-picker shortcuts

Vue3是目前流行的JavaScript框架之一，而el-date-picker是饿了么团队基于Vue.js开发的日期选择器组件，它提供了一些常用的时间快捷选择方式。

在el-date-picker组件中，shortcuts属性是一个数组，它可以用于配置快捷选项。例如：

<el-date-picker v-model="date" type="date" :shortcuts="shortcuts"></el-date-picker>

在这里，我们使用了shortcuts属性来配置快捷选项。shortcuts数组中每个元素都代表一个快捷选项，它包含以下属性：

- text: 快捷选项的文本描述。
- value: 快捷选项的值。它是一个数组，包含两个元素，分别代表开始时间和结束时间。
- onClick: 点击快捷选项时触发的回调函数。

例如，我们可以这样配置shortcuts属性：

data() {
  return {
    date: '',
    shortcuts: [{
      text: '最近一周',
      value: [new Date(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()],
      onClick(picker) {
        picker.$emit('pick', this.value);
      }
    }, {
      text: '最近一个月',
      value: [new Date(new Date().getTime() - 3600 * 1000 * 24 * 30), new Date()],
      onClick(picker) {
        picker.$emit('pick', this.value);
      }
    }]
  }
}

在这里，我们配置了两个快捷选项：最近一周和最近一个月。当用户点击这些选项时，会触发相应的回调函数，并将开始时间和结束时间传递给el-date-picker组件。