故事是这样开始的,有个需求是需要一个时间选择控件,提供额外的清理控件中内容的按钮。
<template>
<a-space direction="vertical" :size="12">
<a-date-picker v-model:value="value1" />
</a-space>
<a-button @click="clearDate">清除时间</a-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
const value1 = ref<Dayjs>()
const clearDate = () => {
value1.value = ''
// value1.value = null
// value1.value = dayjs()
}
</script>
代码功能上是正常的,但赋值时会出现TS类型检测的告警,这张图有考点,最后有答案。
尝试了几种方式均无法解决问题
-
value1.value = ‘’
警告
-
value1.value = null
警告
-
value1.value = dayjs()
会去当前时间,不满足需求
搜索了半天发现大家都没有遇到这个问题,奇怪。
dayjs的issue中也没发现蛛丝马迹,奇怪。
突然想到,antd的这个组件不是有个allowClear
属性,不就是干这个的吗?那应该是支持的。
于是在antd中来回翻滚,终于在generateSinglePicker.tsx
文件中找到了如下代码:
const DatePicker = getPicker(undefined, 'ADatePicker');
const WeekPicker = getPicker('week', 'AWeekPicker');
const MonthPicker = getPicker('month', 'AMonthPicker');
const YearPicker = getPicker('year', 'AYearPicker');
const TimePicker = getPicker('time', 'TimePicker'); // 给独立组件 TimePicker 使用,此处名称不用更改
const QuarterPicker = getPicker('quarter', 'AQuarterPicker');
这不就是给dayjs
赋各种类型的值吗?这个undefined
看起来十分可以。
于是,尝试为其赋值undefined
。于是,世界都清爽了。
回过头看,之前的截图:
这他妈不是清楚的写着接收undefined
吗?