ngAlain下使用nz-select与文件上传框出现灵异bug

news2024/11/26 22:28:55

bug描述

初始化页面,文件上传框无法出现:
在这里插入图片描述

但点击一次选择框以后,就会出现:
在这里插入图片描述

真的很神奇。。。

下面逐步排查看看是什么原因。

设想一:

选择框与文件框不可同时存在,删掉选择框看看:
在这里插入图片描述

还是不行。不是选择框问题。但是有发现,点击原本选择框位置,文本框会出现。
好了,看看文件框的范围:

排查,文件框的范围:

检查元素,得到:
在这里插入图片描述
那么可以得知:
点击了选择框才出现有可能是因为,刚好触发了文件框的范围。

排查 文件框样式

文件框的美化原理是设置文件框足够大,并且透明,底下用其他图片做美化,然后用户点击了图片其实是点击上层的文件框的,样式如下:
在这里插入图片描述
改一下,只保留大小,试试:
在这里插入图片描述

然后结果为:
在这里插入图片描述
在这里插入图片描述

还是一样,不过样式已经出来了。
也就是说,这bug与样式关系不大。

结论

嗯。。。最后发现是 逻辑中包含了 隐藏input的开关,因为某些原因,即使修改了开关=显示,但是实际界面没有重新渲染,点击了select以后界面才渲染,这时候连同文件框也正常渲染,所以,解决方案是:
在这里插入图片描述
修改开关以后强制刷新下界面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1558656.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pytest--python的一种测试框架--pycharm创建项目并进行接口请求

前言 学习request的使用,在用之前,用官方文档提供的接口:https://api.github.com/events; ctrl鼠标左键可以进入被调用函数源码,可以看到第一个参数URL是必须参数,params是选填,**kwargs是关键…

基于单片机的自动浇灌系统的设计

本文设计了一款由单片机控制的自动浇灌系统。本设计的硬件电路采用AT89C51单片机作为主控芯片,采用YL-69土壤湿度传感器检测植物的湿度。通过单片机将采集湿度值与设定值分析处理后,控制报警电路和水泵浇灌电路的开启,从而实现植物的自动浇灌。 1 设计目的 随着生活水平的…

哥本哈根Major后steam搬砖该何去何从?

都在问我哥本哈根major比赛过后市场会不会崩盘呢?说实话,我是不喜欢预测市场的,其实是没那个本事而已。若真有这个预测市场走势的本事,我还用坐在这里每天苦哈哈的搬砖吗?我直接干囤卡囤号的倒卖生意岂不早发财了&…

Docker 哲学 - push 本机镜像 到 dockerhub

注意事项: 1、 登录 docker 账号 docker login 2、docker images 查看本地镜像 3、注意的是 push镜像时 镜像的tag 需要与 dockerhub的用户名保持一致 eg:本地镜像 express:1 直接 docker push express:1 无法成功 原因docker不能识别 push到哪里 …

LeetCode题练习与总结:N皇后

一、题目描述 按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n ,返回所有不同的 n 皇后问题 的解决…

【嵌入式——C语言】VScode编写C程序、交叉编译

【嵌入式——C语言】VScode编写C程序、交叉编译 第一步第二步第三步第四步第五步第六步第七步第八步 第一步 下载Visual Studio Code下载地址 然后直接安装就可以了。 第二步 前提是你的电脑上安装了WSL。。。 打开vscode的扩展,输入WSL进行安装 安装完之后在窗…

SpringBoot 集成分布式任务调度 XXL-JOB【保姆级上手】

文章目录 XXL-JOB 介绍分布式任务调度XXL-JOB 概述 快速入门下载源码初始化调度数据库编译源码调度中心调度中心介绍配置调度中心部署调度中心集群部署调度中心(可选)Docker 镜像方式搭建调度中心(可选) 执行器执行器介绍添加依赖…

DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧

遍历是指通过或遍历节点树 遍历节点树 通常&#xff0c;您想要循环一个 XML 文档&#xff0c;例如&#xff1a;当您想要提取每个元素的值时。 这被称为"遍历节点树"。 下面的示例循环遍历所有 <book> 的子节点&#xff0c;并显示它们的名称和值&#xff1a;…

交替子数组计数 - 力扣题解

⭐简单说两句⭐ ✨ 正在努力的小新~ &#x1f496; 超级爱分享&#xff0c;分享各种有趣干货&#xff01; &#x1f469;‍&#x1f4bb; 提供&#xff1a;模拟面试 | 简历诊断 | 独家简历模板 &#x1f308; 感谢关注&#xff0c;关注了你就是我的超级粉丝啦&#xff01; &…

设计模式(一)简介

一、书籍推荐及博客 大话设计模式 设计模式的艺术 XXL开源社区 | 博客 二、通俗版概念 创建型模式、结构型模式、行为型模式 怎么建房子、建什么样的房子、建的房子有什么用 三、重点模式及简述 1、创建型模式 工厂方法&#xff08;多态工厂的实现&#xff09; 抽象工厂…

JAVA流 学习思考

1. 水在前面 接着上周的Lambda表达式&#xff0c;这周学习了流。说实话作为工具来讲&#xff0c;这玩意好像挺强大的&#xff0c;倒是真要掌握这工具貌似要记住不少东西&#xff0c;年纪大了不想背书的可以看看这篇水文&#xff0c;等到用的时候再根据具体的使用找度娘。&#…

常用技术-Timer定时器

什么是Timer Timer是JDK自带的任务调度工具类&#xff0c;只需要java.util.Timer和java.util.TimerTask两个类就可以实现基本任务调度功能 Timer是一种线程设施&#xff0c;用于安排以后在后台线程中执行的任务。可安排任务执行一次&#xff0c;或者定期重复执行&#xff0c;…

谈谈配置中心?

配置中心可以做集中式的服务配置管理&#xff0c;比如配置一些数据库连接的URL&#xff0c;一些共用的配置且可动态调整的参数。如果不采用集中式的管理&#xff0c;会导致修改起来特别麻烦&#xff0c;一个个的修改特别繁琐。 Nacos Config配置中心中采用的是客户端拉取数据&a…

腾讯云轻量应用服务器“月流量”限制?流量不够怎么办?

腾讯云轻量应用服务器套餐带流量包&#xff0c;就是有月流量限制的意思&#xff0c;超出轻量套餐的流量需要另外支付流量费&#xff0c;轻量服务器地域不同超额流量费用也不同&#xff0c;北京上海广州等中国内地地域流量价格是0.8元每GB&#xff0c;中国香港地域流量价格是1元…

Xilinx IDDR及ODDR使用和仿真

平台&#xff1a;Vivado2018 官方相关文档&#xff0c;ug471_7Series_SelectIO.pdf 关于IDDR与ODDR Input DDR Resource(IDDR) 外部的数据在时钟的上下沿同时传输数据&#xff0c;我们可以使用IDDR原语将输入的单bit数据转化为2bit的数据输出。同时数据速率变为原来的二分之一…

python的Web框架比较

个人博客:Sekyoro的博客小屋 个人网站:Proanimer的个人网站 之前好像写过一些关于Python的Web框架?现在再按照ASGI与原本的WSGI区分一下,顺便把框架(framework)与库(library)区分一下. 之前我也写过(或者说想过)一些类似生态以及作用的框架进行比较,大多都是看看网上评价以及s…

微服务demo(三)nacosfeign

一、feign使用 1、集成方法 1.1、pom consumer添加依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId><version>2.2.6.RELEASE</version></dependency&…

算法学习——LeetCode力扣补充篇2

算法学习——LeetCode力扣补充篇2 724. 寻找数组的中心下标 724. 寻找数组的中心下标 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个整数数组 nums &#xff0c;请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右…

C语言 05 变量与常量

变量 变量就像在数学中学习的 x&#xff0c;y 一样&#xff0c;可以直接声明一个变量&#xff0c;并利用这些变量进行基本的运算&#xff0c;声明变量的格式为&#xff1a; 数据类型 变量名称 初始值;&#xff08;其中初始值可以不用在定义变量时设定&#xff09; 是赋值操作…

【python】常用函数汇总(持续更新……)

文章目录 【numpy.exp()】返回e的幂次方&#xff0c;e是一个常数为2.71828【np.dot()】矩阵相乘【np.linalg.inv()】矩阵求逆 【numpy.exp()】返回e的幂次方&#xff0c;e是一个常数为2.71828 举例&#xff1a;numpy.exp() 【np.dot()】矩阵相乘 【要点】 1、前者的列数后者…