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;
};

即可。

posted @ 2024-04-12 10:11  罗毅豪  阅读(82)  评论(0编辑  收藏  举报