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

bug描述

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

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

真的很神奇。。。

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

设想一:

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

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

排查,文件框的范围:

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

排查 文件框样式

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

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

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

结论

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

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

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

相关文章

隐语SecretFlow实训营-第8讲:快速上手隐语SCQL的开发实践

SCQL使用/集成实践 目前SCQL只开放API供用户使用/集成 使用SCDBClient上手体验可以基于SCQL API开发封装白屏产品,或集成到业务链路中 使用流程: 部署系统 环境配置: 机器配置:CPU/MEM最低8C16G机构之间的网络互通 镜像&…

全面了解海外网络专线

SD-WAN海外网络专线技术 在选择海外网络专线服务时,企业需要考虑多个因素,包括服务商的可靠性、价格、技术支持和合规性。本文将探讨跨境网络专线的价格因素、合法跨境上网的方式,以及SD-WAN跨境上网专线的优势。 跨境网络专线的价格与办理…

Java基础知识总结(35)

获取成员变量 Field getField(String name):返回此Class对象对应类的指定public Field。 Field[]getFields():返回此Class对象对应类的所有public Field。 public class Person { ​public int publicPerson1;protected int protectedPerson2;int def…

STM32学习笔记(11_2)- W25Q64简介和工作原理

无人问津也好,技不如人也罢,都应静下心来,去做该做的事。 最近在学STM32,所以也开贴记录一下主要内容,省的过目即忘。视频教程为江科大(改名江协科技),网站jiangxiekeji.com 本期学…

什么是ECMAScript

ECMAScript (缩写为ES) 是一种由 Ecma 国际组织标准化的脚本语言。它最初是为了在网页浏览器中提供动态交互功能而设计的,现在已经广泛应用于客户端和服务器端开发等各种领域。 ECMAScript 定义了语法、类型、语句、关键字和操作符等基本元素,还提供了许…

Golang Gin框架

1、这篇文章我们简要讨论一些Gin框架 主要是给大家一个基本概念 1、Gin主要是分为路由和中间件部分。 Gin底层使用的是net/http的逻辑,net/http主要是说,当来一个网络请求时,go func开启另一个协程去处理后续(类似epoll)。 然后主协程持续…

蓝桥杯物联网竞赛_STM32L071_15_ADC/脉冲模块

ADC模块用的是RP1不用多说了,主要是脉冲模块,这个模块没考过 这个脉冲模块放出脉冲,主要能用TIM捕获到这个脉冲的高电平持续时间即可 CubMx配置: 脉冲模块的引脚与PB0相连,所以用PB0读取上升沿记的数和下降沿记的数&am…

Day29|回溯算法part05:491.递增子序列、46.全排列、 47.全排列 II

491. 递增子序列 leetcode上本题叫做非递减子序列&#xff0c;点名序列存在重复元素的情况。 class Solution {private List<Integer> path new ArrayList<>();private List<List<Integer>> res new ArrayList<>();public List<List<I…

openshift和k8s的差别

OpenShift 是一种基于 Kubernetes 的完整的容器应用平台&#xff0c;支持多种自动化功能&#xff0c;如自动升级、自动扩展、负载均衡、监控和日志记录等。 相比之下&#xff0c;Kubernetes 只是一个容器编排和编排平台&#xff0c;它为容器化应用程序提供自动化部署、扩展、故…

C语言——字符函数和字符串函数(下)

引言 在上一篇中&#xff0c;我们介绍了字符函数和一些字符串函数&#xff0c;在这一篇章中&#xff0c;我们会继续学习字符串函数&#xff0c;那我们现在就开始学习吧&#xff01;&#xff01;&#xff01; 字符串函数 strncpy 1.strncpy的用法 strncpy是一个在C语言中常用…

炫我科技:云渲染领域的佼佼者

随着数字化时代的来临&#xff0c;云渲染技术正逐渐成为影视、游戏、动画等创意产业的重要支柱。在这一领域中&#xff0c;炫我科技凭借其卓越的技术实力、优质的服务以及不断创新的精神&#xff0c;已然成为了云渲染行业的佼佼者。 炫我科技自成立之初&#xff0c;便以打造高…

全排列问题(回溯算法和深搜)

题目&#xff1a;P1706 全排列问题 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using namespace std;int n,pd[110];//用来标记数字是否被使用过 int a[10]; void print(){for(int i1;i<n;i) cout<<setw(5)<<a[i];cout<<…

tkinter实现通用对账文件解析软件

软件需求 和银行等金融机构合作过程中&#xff0c;经常会有还款计划、放款文件等定时推送的文件&#xff0c;以常见的分隔符进行分隔开&#xff0c;为了在系统出现问题时&#xff0c;快速查找异常数据&#xff0c;写了一个小工具解析这些文件并写入到excel中。 软件功能 将常…

Elasticsearch-桶聚合查询详解

前言 在之前我们详细面熟了es的查询用法&#xff0c;但是es还拥有强大的聚合查询功能&#xff0c;可以得到类似分组&#xff0c;直方图&#xff0c;折线图等数据组合。类似SQL的SUM、AVG、COUNT、GROUP BY Elasticsearch-02-es的restapi使用 概念 1&#xff1a;ES聚合查询流…

是什麼讓WhatsApp行銷如此有效?

還記得在幾年前&#xff0c;WhatsAPP還是個用作於溝通的聊天工具。 但如今&#xff0c;它已轉變為強大的行銷管道&#xff0c;在全球擁有超過20億活躍使用者&#xff0c;為企業以直接、個人化和高度參與的方式與受眾建立聯繫提供了巨大的潛力。 WhatsApp 行銷和電子郵件行銷的…

Maven入门指南:构建与管理Java项目的利器

引言 在Java开发领域&#xff0c;项目构建和管理是一个至关重要的环节。随着项目规模和复杂度的不断增加&#xff0c;有效地管理项目的依赖、构建过程以及部署流程变得尤为关键。在这样的背景下&#xff0c;Apache Maven作为一款优秀的项目管理工具应运而生&#xff0c;成为了…

ChatGPT智能辅助:让学术论文写作更从容自如

ChatGPT无限次数:点击直达 html ChatGPT智能辅助&#xff1a;让学术论文写作更从容自如 引言 学术论文写作一直是许多研究者和学生头疼的问题。无论是构思文章框架、寻找合适的文献资料&#xff0c;还是整合思路、撰写论文正文&#xff0c;都是考验耐心与专业知识的过程。…

浅谈HTTP

浅谈HTTP 要通过netty实现HTTP服务器(或者客户端)&#xff0c;首先你要了解HTTP协议。 HTTP在客户端 - 服务器计算模型中用作请求 - 响应协议。 例如&#xff0c;web浏览器可以是客户端&#xff0c;并且在托管网站的计算机上运行的应用程序可以是服务器。 客户端向服务器提交…

Vue ElementPlus Input 输入框

Input 输入框 通过鼠标或键盘输入字符 input 为受控组件&#xff0c;它总会显示 Vue 绑定值。 通常情况下&#xff0c;应当处理 input 事件&#xff0c;并更新组件的绑定值&#xff08;或使用v-model&#xff09;。否则&#xff0c;输入框内显示的值将不会改变&#xff0c;不支…

异构加速GPU服务器设计方案:904-全国产化异构加速GPU服务器

全国产化异构加速GPU服务器 一、产品介绍 X7340H0是中科可控基于HYGON系列处理器开发的一款全新高端2U双路GPU服务器。X7340H0采用优异的可扩展架构设计&#xff0c;支持高密度扩展GPU加速卡&#xff0c;为深度学习推理场景提供更加安全可靠、高性价比的解决方案。 性能卓越 ●…