在uniapp开发中用到时间日期选择器不能重置问题,通过ref来解决。
在uni-datetime-picker上定义一个ref
<uni-datetime-picker ref="datetimePickerRef" type="daterange" :clear-icon="false" v-model="value" placeholder="请选择有效期" v-model="value" @change="valueChange" />
调用组件原生的clear方法
// 日期重置
const datetimePickerRef= ref(null);
const valueChange = (e) => {
if (!isValidDateOrder(e)) {
value = [];
datetimePickerRef.value.clear();
uni.showToast({
icon: 'none',
title: '有效期格式不正确'
});
}
}
// 日期校验规则
const isValidDateOrder = dateArray => {
// 检查数组长度是否为 2
if (dateArray.length!== 2) {
return false;
}
// 将日期字符串转换为 Date 对象
const date1 = new Date(dateArray[0]);
const date2 = new Date(dateArray[1]);
// 检查日期是否有效
if (isNaN(date1.getTime()) || isNaN(date2.getTime())) {
return false;
}
// 比较两个日期的时间戳
return date1.getTime() < date2.getTime();
}
uni-file-picker回显也可以通过ref.value.setValue来设置回显
<uni-file-picker
ref="idCardFrontPathRef"
:key="idCardFrontPath ? idCardFrontPath : ''"
limit="1"
:image-styles="imageStyles"
:value="idCardFrontPath"
fileMediatype="image"
:auto-upload="true"
file-extname="png,jpg,jpeg"
@select="selectFile($event, 1)"
>
<image class="file-bg" mode="scaleToFill" src="~@/static/decorate/idcard1.png"/>
<view class="file-icon-block">
<image class="camera-icon" mode="scaleToFill" src="~@/static/decorate/camera.png"/>
<view class="file-picker-hint">上传身份证人像面</view>
</view>
</uni-file-picker>
// 定义文件路径变量
let idCardFrontPath = [];
// 定义 ref
const idCardFrontPathRef = ref(null);
idCardFrontPathRef.value.setValue(idCardFrontPath);
又踩坑了~后面我发现是:value的问题
正确的使用方法:
<uni-file-picker :readonly="!action" :limit="9" v-model="businessLicensePathTwo" @select="selectOtherCertificatesImageList($event, 'otherCertificatesImageList')" @delete="deleteOtherCertificatesImageList">
<uni-icons type="plusempty" color="#21CD92" size="28"></uni-icons>
</uni-file-picker>
import { ref, computed, watch } from 'vue';
const businessLicensePathTwo = computed({
get() {
return baseFormData.businessLicensePathTwo ? [{ url: baseFormData.businessLicensePathTwo }] : [];
},
set(newValue) {
if (newValue.length > 0) {
baseFormData.businessLicensePathTwo = newValue[0].url;
} else {
baseFormData.businessLicensePathTwo = '';
}
}
});