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

最近更新

  1. TCP协议是安全的吗?

    2024-01-31 18:20:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-31 18:20:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-31 18:20:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-31 18:20:01       18 阅读

热门阅读

  1. [Android] SDK->NuPlayer

    2024-01-31 18:20:01       25 阅读
  2. uniapp如何引入uview组件?

    2024-01-31 18:20:01       39 阅读
  3. unity - 保存camera组件图像

    2024-01-31 18:20:01       24 阅读
  4. 并查集+01背包:1252. 搭配购买

    2024-01-31 18:20:01       30 阅读
  5. 搜索<1>——DFS与回溯

    2024-01-31 18:20:01       34 阅读
  6. C#中Lazy<T> 泛型类(延迟初始化对象)

    2024-01-31 18:20:01       35 阅读
  7. Android开发中用的根据文字使用Speech进行语音播报

    2024-01-31 18:20:01       30 阅读
  8. MicroPython核心:字符串驻留(String interning)

    2024-01-31 18:20:01       29 阅读