当前位置: 首页 > article >正文

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


http://www.kler.cn/a/227306.html

相关文章:

  • 『运维备忘录』之 Systemd 命令详解
  • 网络异常案例四_IP异常
  • LeetCode18. 四数之和
  • 如何用gpt快速做好数据分析?
  • STM32的ADC采集传感器的模拟量数据
  • 【数据分享】1929-2023年全球站点的逐日降雪深度数据(Shp\Excel\免费获取)
  • hyperf 二十四 模型缓存
  • LabVIEW电能质量监测系统
  • 【c++】vector用法详解
  • 2024.2.3
  • SparkStreaming---入门
  • 深搜问题:猴群
  • Matplotlib绘制炫酷散点图:从二维到三维,再到散点图矩阵的完整指南与实战【第58篇—python:Matplotlib绘制炫酷散点图】
  • 计算机网络_1.6.1 常见的三种计算机网络体系结构
  • mysql 删除分区表数据
  • 17.Golang channel的基本定义及使用
  • linux中如何输入控制字符
  • Codeforces Round 891 (Div. 3)补题
  • 聊聊比特币----比特币地址
  • [C语言]结构体初识