Vant之日期选择BUG修复
我连续使用两个Vant的日期组件,但是选中第一个日期组件的结果显示到第二个日期组件上了,HTML代码为:
<div v-if="item.type === 'date' && !item.allowShowYearAndMonth" class="time" > <van-field :label="item.label" v-model="mainFormState[item.prop]" is-link readonly :placeholder="item.placeholder || '点击选择'" @click="showCalendar = true" label-class="timeLabel" :required="item.isConfigRequired" /> <van-calendar v-model:show="showCalendar" :min-date="minDate" :max-date="maxDate" @confirm="(date) => onCalenderConfirm(date, item)" /> </div>
JS为:
const onCalenderConfirm = (date, item) => { mainFormState.value[item.prop] = dayjs(date).format("YYYY-MM-DD"); showCalendar.value = false; };
修改为:
<div v-if="item.type === 'date' && !item.allowShowYearAndMonth" class="time" > <van-field :label="item.label" v-model="mainFormState[item.prop]" is-link readonly :placeholder="item.placeholder || '点击选择'" @click=" showCalendar = true; currentComp = item; " label-class="timeLabel" :required="item.isConfigRequired" /> <van-calendar v-model:show="showCalendar" :min-date="minDate" :max-date="maxDate" @confirm="onCalenderConfirm" /> </div>
JS为:
const currentComp = ref(""); const onCalenderConfirm = (date) => { mainFormState.value[currentComp.value.prop] = dayjs(date).format("YYYY-MM-DD"); currentComp.value = ""; showCalendar.value = false; };
即可。