uni-datetime-picker daterange组件model数据重置但是组件还是有选中值 vue3

在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 = '';
    }
  }
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值