请教下 element-plus中封装 datepicker，点击后没反应，是怎么回事？

Question

我封装了element-plus中的datepicker的组件，代码如下：

<script setup lang="ts">
defineProps(["modelValue"]);

const setTime = (seconds = 0) => {
  const date = new Date();
  if (seconds) {
    date.setTime(date.getTime() + seconds * 1000);
    return date;
  }
  return date;
};

const shortcuts = [
  {
    text: "现在",
    value: setTime()
  },
  {
    text: "1分钟后",
    value: setTime(60)
  }
];

const emits = defineEmits(["update:modelValue"]);
const select = (value: string) => {
  console.log(value);
  emits("update:modelValue", value);
};
</script>

<template>
  <el-form-item label="执行时间" prop="started_at">
    <el-date-picker
      :model-value="modelValue"
      clearable
      type="datetime"
      style="width: 100%"
      placeholder="请选择时间"
      :shortcuts="shortcuts"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="select"
    />
  </el-form-item>
</template>

使用组件：

<date-picker-item v-model="datetime" />

现在的结果是点击后没反应，change事件没有触发

Answer 1

// script
const props = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])
const attrs = useAttrs()
const value = computed({
    get(){
        return props.modelValue
    },
    set(val){
        emits('update:modelValue', val)
    }
})

// template
<el-date-picker v-model=value v-bind=attrs> </ el-date-picker>