iview DatePicker 日期选择组件在弹窗中使用transfer,导致选择日期弹窗会关闭的问题

背景:在弹窗里面使用日期选择组件,选择组件的面板被弹窗遮挡了部分,所以需要使用transfer属性,但是使用之后组件面板插入body中了,面板的事件会导致弹窗关闭。

解决方案: 

添加上transfer属性和指定的date-picker样式名

<DatePicker transfer transfer-class-name="date-picker" :value="dateValue" type="date"></DatePicker>


在合适的时机中,通过指定的样式名给日期选择组件的选择面板绑定事件进行阻止冒泡  

dateStopEvent() {
      this.$nextTick(() => {
        try {
          const ele = document.querySelector('.date-picker');
          ele.addEventListener('click', (event) => {
            event.stopPropagation();
          });
        } catch(e) {}
      });
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值