vue3+element-plus el-date-picker日期组件再次封装（DatePicker与DateTimePicker合并根据type值来显示并自定义常规快捷方式）

<template>
  <el-date-picker
    v-model="dateValue"
    :type="type"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    :editable="editable"
    :size="size"
    :align="align"
    :popper-class="popperClass"
    :picker-options="pickerOptions"
    :default-value="defaultValue"
    :default-time="defaultTime"
    :value-format="valueFormat"
    :format="format"
    :style="style"
    @change="handleChange"
  ></el-date-picker>
</template>
 
<script setup>
import { ref, watch } from 'vue';
import { ElDatePicker } from 'element-plus';
 
const props = defineProps({
  modelValue: {
    type: [String, Date, Array],
    default: ''
  },
  type: {
    type: String,
    default: 'date' // date, datetime, datetimerange, daterange, month, year
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  editable: {
    type: Boolean,
    default: true
  },
  size: {
    type: String,
    default: 'small' // large, small
  },
  align: {
    type: String,
    default: 'left' // left, center, right
  },
  popperClass: {
    type: String,
    default: ''
  },
  pickerOptions: {
    type: Object,
    default: () => ({})
  },
  defaultValue: {
    type: Date,
    default: null
  },
  defaultTime: {
    type: String,
    default: '00:00:00'
  },
  valueFormat: {
    type: String,
    default: 'yyyy-MM-dd HH:mm:ss' // 例如：yyyy-MM-dd HH:mm:ss
  },
  format: {
    type: String,
    default: 'yyyy-MM-dd HH:mm:ss' // 例如：yyyy-MM-dd HH:mm:ss
  },
  style: {
    type: String,
    default: ''
  }
});
 
const emit = defineEmits(['update:modelValue', 'change']);
 
const dateValue = ref(props.modelValue);
 
watch(dateValue, (newValue) => {
  emit('update:modelValue', newValue);
});
 
const handleChange = (value, date) => {
  emit('change', value, date);
};
</script>

这个示例中，我们创建了一个Vue 3组件，它封装了Element Plus的<el-date-picker>组件。我们使用了Composition API（setup函数），以及ref和watch来管理组件的状态。我们提供了一系列的props来配置日期选择器，并且能够通过update:modelValue事件和change事件与父组件通信。这个封装的组件可以用于日期选择场景，并且可以方便地进行配置和扩展。