VUE3开发中的一个bug(Ant Design时间组件)

233 阅读1分钟

问题:

点击发送之后,发送失败,再次编辑并进行时间修改,时间选择弹窗不显示且报错,如下图 截屏2022-07-05 下午4.22.33.png

截屏2022-07-05 下午4.23.28.png

截屏2022-07-05 下午4.38.49.png

思考

刚开始以为是单选框切换问题,代码如下

<a-form-item label="群发时间">
  <a-radio-group v-model:value="sendType">
    <a-radio value="1">立即发送</a-radio>
    <a-radio value="2">定时发送</a-radio>
  </a-radio-group>
</a-form-item>
<a-form-item v-show="sendType === '2'" :wrapper-col="{ span: 24, offset: 2 }">
   <a-date-picker
       show-time
       v-model:value="formState.sendTime"
       :disabled-date="disabledDate"
       :disabled-time="disabledDateTime"
       placeholder="请选择发送时间"
       format="YYYY-MM-DD HH:mm:ss"
       @ok="onOk"
   />
    <span v-if="isShow" class="ml-2" style="color: red; font-size: 12px"
            >请选择大于当前时间的时间</span>
</a-form-item>

经判断,不是单选框问题

报错和时间有关,那么考虑是formState.sendTime的问题, 将formState显示看sendTime的值, 刚开始打开弹窗没问题时,sendTime值为空字符串 截屏2022-07-05 下午4.31.04.png 请求失败之后,sendTime值存在 截屏2022-07-05 下午4.32.42.png

解决:请求失败之后,将sendTime重置为空字符串

初步判断,出现报错是因为时间被我设置过格式,sendTime的值绑定了时间组件,组件内部估计有自己的格式,格式不符导致问题出现