请教下 element-plus中封装 datepicker,点击后没反应,是怎么回事?
我封装了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
事件没有触发
回复
1个回答
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>
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容