vant组件库Field输入框和Calendar 日历组件配合出现日历组件无法关闭问题

在使用Vant组件库的Field输入框和Calendar日历组件结合时,遇到了日历组件关闭后再次自动打开的问题。原因是事件冒泡导致Field被重复点击。尝试在确认按钮上添加.stop修饰符失败,因为无法直接绑定。最终通过在输入框内添加一个button组件并处理点击事件,成功避免了问题,实现了日期选择并显示。
摘要由CSDN通过智能技术生成

今天在用公司自己封装的app组件库进行开发时,使用封装的Field和Calendar 配合实现日期选择的时候,出现了日历组件无法关闭的问题,具体代码如下

  <zt-field :name="calendarString" :label="calendarString" @click="isShowCalendar=true">
    <template #input>
        {
  {params.date}}
      <zt-calendar
         :title="calendarString"
          @confirm="pickDate"
          v-model:show="isShowCalendar"
          color="#1989fa"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </template>
    </zt-field>


js代码
   const isShowCalendar = ref(false)
    watch(
      () => isShowCalendar.value,
      () => {
        console.log(isShowCalendar.value)
      },
    )

    const currentDate = new Date()
    //当前日期前一年
    const minDate = computed(() => {
      return new Date(
      
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值