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

bug描述

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

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

真的很神奇。。。

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

设想一:

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

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

排查,文件框的范围:

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

排查 文件框样式

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

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

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

结论

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

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

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

相关文章

创业者的三大法宝:自我进化、自我激励与诚信坚守

一、摘要: 在创业的道路上,每一位创业者都如同航海家,驾驶着自己的船只,在波涛汹涌的大海中探寻成功的彼岸。而在这条充满未知与挑战的旅程中,创业者们需要具备哪些关键的品质和能力呢?京东集团创始人刘强…

搭建电商网站外贸网站用API接口可以实现哪些功能(天猫API接口|京东API接口)

在电商领域,API接口可以实现多种功能,起到连接内外部系统及优化电商业务流程等多种作用,从而来提高电商企业的运营效率。 具体来看,API接口接入可以用来: 商品管理: API接口能够用来获取商品详情等&#…

华为OD面试手撕算法-合并排序数组

题目描述 本题是leetcode一道简单题:合并两个有序数组,但是对于时间和空间复杂度面试官明确给出了限制。 // 给定两个排序后的数组 A 和 B,其中 A 的末端有足够的缓冲空间容纳 B。 编写一个方法,将 B 合并入 A 并排序。 // 初始化…

马化腾的电商梦,只能靠它来实现了~

我是王路飞。 腾讯要开始加大对电商的投入力度了, 而这些资源所依托的载体,正是【视频号】。 在2023微信公开课PRO上,视频号团队介绍,2022年总用户使用时长已经超过了朋友圈总用户使用时长的80%。视频号直播的看播时长增长156%…

Windows12安装Docker

环境及工具(文末提供) Docker Desktop Installer.exe (官网) 一、查看windows相关配置 查看是否开启相应的功能,如果没有需要开启,然后重启电脑 打开任务管理器(CTRLSHIFTESC)-&g…

高级IO/多路转接-select/poll(1)

概念背景 IO的本质就是输入输出 刚开始学网络的时候,我们简单的写过一些网络服务,其中用到了read,write这样的接口,当时我们用的就是基础IO,高级IO主要就是效率问题。 我们在应用层调用read&&write的时候&…

Webpack部署本地服务器

Webpack部署本地服务器 目录 Webpack部署本地服务器目的认识模块热替换(HMR)什么是 HMRHMR 通过如下几种方式, 来提高开发的速度如何使用 HMRhost 配置 目的 完成自动编译 常用方式: webpack-dev-server webpack-dev-server 是一个用于开发环境的 Web 服…

PCIE学习总结

一、PCIE与SATA区别 1 SATA是半双工,类似于打电话,同一时间只能一端发送或者接收数据;PCIE是全双工,双端可以同时发送或者接收数据; 2 PCIE是串行总线,速率计算,如果双边速率(单边…

vue3+echarts:echarts地图打点显示的样式

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式 series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: &quo…

Qt扫盲-QAssisant 集成其他qch帮助文档

QAssisant 集成其他qch帮助文档 一、概述二、Cmake qch例子1. 下载 Cmake.qch2. 添加qch1. 直接放置于Qt 帮助的目录下2. 在 QAssisant中添加 一、概述 QAssisant是一个很好的帮助文档,他提供了供我们在外部添加新的 qch帮助文档的功能接口,一般有两中添…

Vue3从入门到实战:路由的query和params参数

在Vue 3中,我们可以通过路由的查询参数来传递数据。这意味着我们可以在不同的页面之间传递一些信息,以便页面可以根据这些信息来显示不同的内容或执行不同的操作。 查询参数的使用方式类似于在URL中添加附加信息,以便页面之间可以根据这些信息…

计算机网络-TCP/IP 网络模型

TCP/IP网络模型各层的详细描述: 应用层:应用层为应用程序提供数据传输的服务,负责各种不同应用之间的协议。主要协议包括: HTTP:超文本传输协议,用于从web服务器传输超文本到本地浏览器的传送协议。FTP&…

【Redis基础篇】详细讲解Redis

这篇文章让你详细了解Redis的相关知识,有代码讲解以及图片剖析,让你更轻松掌握 制作不易,感觉不错,请点赞收藏哟 !!! 目录 1 redis基础 1.1 定义 1.2 SQL和NOSQL不同点 1.3 特征 1.4 Redis…

Firefox 关键词高亮插件的简单实现

目录 1、配置 manifest.json 文件 2、编写侧边栏结构 3、查找关键词并高亮的方法 3-1) 如果直接使用 innerHTML 进行替换 4、清除关键词高亮 5、页面脚本代码 6、参考 1、配置 manifest.json 文件 {"manifest_version": 2,"name": &quo…

【芯片验证】通关寄存器与ral_model —— 寄存器生成流程中加入backdoor后门配置

前言 【芯片验证】通关寄存器与ral_model —— backdoor后门访问实操测试-CSDN博客 上一篇文章中,我们通过在环境中配置后门路径的方式来实现了寄存器的后门访问,但是在实际应用中,无论寄存器RTL文件、例化还是寄存器模型大概率都是工具生成的,比如在本专栏中实现的gen_r…

Day57:WEB攻防-SSRF服务端请求Gopher伪协议无回显利用黑白盒挖掘业务功能点

目录 SSRF-原理&挖掘&利用&修复 SSRF无回显解决办法 SSRF漏洞挖掘 SSRF协议利用 http:// (常用) file:/// (常用) dict:// (常用) sftp:// ldap:// tftp:// gopher:// (…

vue 内嵌第三方网页

需要将另一个系统嵌套到当前网页中 一、frame 方法一就是通过html的标签 iframe 实现网页中嵌入其他网站 标签属性 属性含义src嵌套的网页地址width设置嵌套网页的宽度,单位为像素height设置嵌套网页的高度,单位为像素frameborder控制嵌套的网页是否…

高性价比的挂耳式耳机哪个好用?五大高口碑品牌深度测评严选!

入耳式耳机虽然普及度极高,但其缺点也不容忽视。首先,长时间佩戴可能导致耳朵不适,甚至影响听力健康。其次,入耳式耳机往往因为隔音效果过好,导致用户与周围环境脱节,失去了一定的生活便利性。相比之下&…

医学图像处理 利用pytorch实现的可用于反传的Radon变换和逆变换

医学图像处理 利用pytorch实现的可用于反传的Radon变换和逆变换 前言代码实现思路实验结果 前言 Computed Tomography(CT,计算机断层成像)技术作为如今医学中重要的辅助诊断手段,也是医学图像研究的重要主题。如今,随…

2024年第三期丨全国高校大数据与人工智能师资研修班邀请函

2024年第三期 杭州线下班 数据采集与机器学习实战(Python) 线上班 八大专题 大模型技术与应用实战 数据采集与处理实战(Python&八爪鱼) 大数据分析与机器学习实战(Python) 商务数据分析实战&…