不能将类型“null”分配给类型“string | Date | (number | Date)[]

来源:4-11 时间选择组件-完成日期选择组件所有功能

淡定的飞脚

2022-01-02

我的v-model="stratDate"v-model="endDate"v-model会下划线报错,请问怎么解决?
报错如下:

(JSX attribute) modelValue?: string | Date | (number | Date)[] | undefined
不能将类型“{ toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; [Symbol.toPrimitive]: { ...; }; } | null”分配给类型“string | Date | (number | Date)[] | undefined”。ts(2322)
index.d.ts(367, 5): 所需类型来自属性 "modelValue",在此处的 "IntrinsicAttributes & Partial<{ type: IDatePickerType; disabled: boolean; name: string | unknown[]; modelValue: string | Date | (number | Date)[]; ... 13 more ...; unlinkPanels: boolean; }> & Omit<...>" 类型上声明该属性

src\components\baseline\chooseDate\src\index.vue代码:

<template>
    <div class="bs-wrapper">
        <div class="box__start">
            <!-- :max-time="endDate" -->
            <el-date-picker
                v-model="stratDate"
                v-bind="$attrs.startOptions"
                type="date"
                :placeholder="startPlaceholder"
                :disabled-date="startDisabledDate"
            ></el-date-picker>
        </div>
        <div>
            <el-date-picker
                v-model="endDate"
                v-bind="$attrs.endOptions"
                type="date"
                :placeholder="endPlaceholder"
                :disabled="endDateDisabled"
                :disabled-date="endDisabledDate"
            ></el-date-picker>
        </div>
        <div></div>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
    //说明:开始日期提示
    startPlaceholder: {
        type: String,
        default: '请选择开始日期',
    },
    //说明:结束日期提示
    endPlaceholder: {
        type: String,
        default: '请选择结束日期',
    },
    //是否禁用选择今天之前的日期
    disableBeforeToDay: {
        type: Boolean,
        default: false,
    },
    //是否禁用选择今天之后的日期
    disableAfterToDay: {
        type: Boolean,
        default: false,
    },
    //可否选择当天
    selectToDay: {
        type: Boolean,
        default: true,
    },
})

//子传父
let emits = defineEmits(['startChange', 'endChange'])
//开始日期
const stratDate = ref<Date | null>(null)

//结束日期
const endDate = ref<Date | null>(null)
// 结束日期是否显示可编辑:默认不可编辑
const endDateDisabled = ref<boolean>(true)

//一天的毫秒数
const oneDateNumber = 1000 * 60 * 60 * 24
//禁用开始日期的函数
let startDisabledDate = (time: Date) => {
    if (props.disableBeforeToDay && props.disableAfterToDay) {
        return (
            time.getTime() < Date.now() - oneDateNumber ||
            time.getTime() > Date.now() - oneDateNumber
        )
    } else if (props.disableBeforeToDay) {
        return time.getTime() < Date.now() - oneDateNumber
    } else if (props.disableAfterToDay) {
        return time.getTime() > Date.now() - oneDateNumber
    }
}
//禁用结束日期的函数
const endDisabledDate = (time: Date) => {
    //是否禁用选择今天之前的日期\是否禁用选择今天之后的日期
    //此时无意义,结束日期不能选任何值
    if (props.disableBeforeToDay && props.disableAfterToDay) {
        if (stratDate.value) {
            return (
                time.getTime() < Date.now() - oneDateNumber ||
                time.getTime() > Date.now() - oneDateNumber ||
                (props.selectToDay
                    ? time.getTime() <=
                      stratDate.value.getTime() - oneDateNumber
                    : time.getTime() <
                      stratDate.value.getTime() + oneDateNumber)
            )
        }
    } else if (props.disableBeforeToDay) {
        //假设开始时间是2022-04-1
        //禁用选择今天之前的日期,比如今天是2022-04-10
        //selectToDay 可否选择当天:true 可,可以选择包括开始日期到当天之前的日期,范围是2022-04-1至2022-04-10
        //selectToDay 可否选择当天:false 不可,可以选择包括开始日期下一天到当天之前的日期,范围是2022-04-2至2022-04-10
        if (stratDate.value) {
            return (
                time.getTime() < Date.now() - oneDateNumber ||
                (props.selectToDay
                    ? time.getTime() <=
                      stratDate.value.getTime() - oneDateNumber
                    : time.getTime() <
                      stratDate.value.getTime() + oneDateNumber)
            )
        }
    } else if (props.disableAfterToDay) {
        //假设开始时间是2022-04-15
        //禁用选择今天之后的日期,比如今天是2022-04-10
        //selectToDay 可否选择当天:true 可,可以选择开始日期、当天之后的日期,范围是2022-04-15之后的日期
        //selectToDay 可否选择当天:false 不可,可以选择开始日期、当天之后的日期,范围是2022-04-16之后的日期
        if (stratDate.value) {
            return (
                time.getTime() > Date.now() - oneDateNumber ||
                (props.selectToDay
                    ? time.getTime() <=
                      stratDate.value.getTime() - oneDateNumber
                    : time.getTime() <
                      stratDate.value.getTime() + oneDateNumber)
            )
        }
    } else {
        //假设开始时间是2022-04-15
        //比如今天是2022-04-10
        //selectToDay 可否选择当天:true 可,可以选择开始日期之后的日期,范围是2022-04-15之后的日期
        //selectToDay 可否选择当天:false 不可,可以选择开始日期之后的日期,范围是2022-04-16之后的日期
        if (stratDate.value) {
            return props.selectToDay
                ? time.getTime() <= stratDate.value.getTime() - oneDateNumber
                : time.getTime() < stratDate.value.getTime() + oneDateNumber
        }
    }
}
//开始日期清空,联动把结束日期也清空
watch(
    () => stratDate.value,
    val => {
        endDate.value = null
        endDateDisabled.value = true
        if (val) {
            endDateDisabled.value = false
            //给父组件分发事件
            emits('startChange', val)
        }
    }
)
//结束日期监听
watch(
    () => endDate.value,
    val => {
        if (val !== null) {
            emits('endChange', {
                stratDate: stratDate.value,
                endDate: val,
            })
        }
    }
)
</script>

<style lang="scss" scoped>
.bs-wrapper {
    display: flex;
}
.box {
    &__start {
        margin-right: 0.2rem;
    }
}
</style>
写回答

1回答

五月的夏天

2022-01-04

在使用变量后面加个!即可 。

1
1
淡定的飞脚
不行呀,v-model value must be a valid JavaScript member expression.vue(42) 在v-mode加就会上面报错,v-model="endDate!" 如下加`const endDate = ref(null)!`也不行
2022-01-09
共1条回复

基于Vue3+Vite+TS,二次封装element-plus业务组件

集成大量实际样例,系统掌握前沿技术栈与二次组件库封装能力

447 学习 · 185 问题

查看课程