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

作者站长头像
站长
· 阅读数 5

我封装了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事件没有触发请教下 element-plus中封装 datepicker,点击后没反应,是怎么回事?

回复
1个回答
avatar
test
2024-06-25
// 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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容