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

测试常见前端bug

目录

协作

测试方法

标签:标签 内容/ref/

判断

arr&&arr.length

交互

样式不生效:devtools查找,编译前的标签,运行时不一定存在

可交互的需要提示

hover样式

没有交互逻辑,就不要设置交互

无法交互的情况需要交互失效

超出内容的样式 

设置数据前要清空

注意区分中英文符号(,:)

提示

表单validate

覆盖已有内容的红色边框

设置select样式


协作

改了公共组件后,要把其他用到公共组件的地方也改了,vs中搜索即可

​​​​​​​

测试方法

标签:标签 内容/ref/

    <div class="right-wrap">{{ formData.moduleDataType.includes(1) }}<mds-tabs position="right" v-model="active" @change="scroll(active, $event)"><mds-tabs-pane ref="ttttt" tab="1" :index="1">1</mds-tabs-pane><mds-tabs-pane style="color: brown;" tab="2" :index="2">2</mds-tabs-pane><mds-tabs-pane tab="3" :index="3">3</mds-tabs-pane></mds-tabs></div>

判断

arr&&arr.length

交互

样式不生效:devtools查找,编译前的标签,运行时不一定存在

可交互的需要提示

hover样式

.span-operate {color: #1564FF;cursor: pointer;}

没有交互逻辑,就不要设置交互

无法交互的情况需要交互失效

例如:无成功上传的文件则无法进行下一步

超出内容的样式 

 

设置数据前要清空

openLogDrawer() {this.logData = [];API.getQuery(`getOtherIndexFileLog/${this.wpReleId}`).then((res: any) => {res.data.forEach((val: any) => {this.logData.push({name: val.fileNm || 'undefined',time: val.createTm || 'undefined',creator: val.creator || 'undefined',state: this.status[val.status] || 'undefined',fileUrl: val.fileUrl || 'undefined',fileLogId: val.id || -1,})})this.visibility = true})}

注意区分中英文符号(,:)

​​​​​​​

提示

表单validate

 

 

覆盖已有内容的红色边框

  ::v-deep .validate-success .mds-input {border-color: #d8dce6 !important;}

设置select样式

<mds-select :class="{'validate-success': formData.confmTm}" >
<mds-option v-for="item in CONFM_TM" :value="item.id" :label="item.label" :disabled="isDisabledTm(item)"/>
</mds-select>

相关文章:

测试常见前端bug

目录 协作 测试方法 标签&#xff1a;标签 内容/ref/ 判断 arr&&arr.length 交互 样式不生效&#xff1a;devtools查找&#xff0c;编译前的标签&#xff0c;运行时不一定存在 可交互的需要提示 hover样式 没有交互逻辑&#xff0c;就不要设置交互 无法交互…...

【Python数据分析】Python常用内置函数(一)

&#x1f389;欢迎来到Python专栏~Python常用内置函数&#xff08;一&#xff09; ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文…...

OpenCV图像处理-图像分割-MeanShift

MeanShift 1. 基本概念2.代码示例 1. 基本概念 MeanShift严格说来并不是用来对图像进行分割的&#xff0c;而是在色彩层面的平滑滤波。它会中和色彩分布相近的颜色&#xff0c;平滑色彩细节&#xff0c;侵蚀掉面积较小的的颜色区域&#xff0c;它以图像上任意一点P为圆心&…...

【Rust 基础篇】Rust Trait 实现:灵活的接口抽象

导言 Rust是一种以安全性和高效性著称的系统级编程语言&#xff0c;其设计哲学是在不损失性能的前提下&#xff0c;保障代码的内存安全和线程安全。为了实现这一目标&#xff0c;Rust引入了"所有权系统"、"借用检查器"等特性&#xff0c;有效地避免了常见…...

【嵌入式Linux项目】基于Linux的全志H616开发板智能家居项目(语音控制、人脸识别、安卓APP和PC端QT客户端远程操控)有视频功能展示

目录 一、功能需求 二、开发环境 1、硬件&#xff1a; 2、软件&#xff1a; 3、引脚分配&#xff1a; 三、关键点 1、设计模式之工厂模式 2、wiringPi库下的相关硬件操作函数调用 3、语音模块的串口通信 4、线程 5、摄像头的实时监控和拍照功能 6、人脸识别 四、编…...

ElasticSearch基础篇-条件查询与映射

ElasticSearch基础篇二 条件查询 GET http://10.192.193.98:9200/shopping/_search?qtitle:小米手机q:代表查询条件 响应结果 {"took": 772,"timed_out": false,"_shards": {"total": 1,"successful": 1,"skipped…...

大模型部署框架 FastLLM 实现细节解析

0x0. 前言 接着 大模型部署框架 FastLLM 简要解析 这篇文章首先梳理了一下FastLLM的调用链和关键的数据结构&#xff0c;然后解析了 FastLLM 的一些实现细节和CPU/GPU后端实现采用的优化技巧。 0x1. 调用链和数据结构解析 以chatglm-6b的支持为例&#xff0c;函数入口在 htt…...

Flutter ios真机调试连接断开后应用闪退

使用ios真机调试的时候&#xff0c;能正常打开应用&#xff0c;但是当数据线断开连接的时候&#xff0c;应用就会关闭&#xff0c;重新打开就会闪退。 原因是flutter默认在开发过程中使用debug模式编译 只需要将debug选择为release 重新编译就行。...

序列化,反序列化之实例

别怕&#xff0c;我一直陪着你 一.知识1.魔术方法 二.实例1.绕过__wakeup, private2.php://filter, data://, __tostring3. 一.知识 1.魔术方法 __construct() 当一个对象创建时自动调用 __destruct() 当对象被销毁时自动调用 (php绝大多数情况下会自动调用销毁对象) __sleep…...

2022年全国职业院校技能大赛(高职组)“软件测试”赛项竞赛任务书

2022年全国职业院校技能大赛&#xff08;高职组&#xff09; “软件测试”赛项竞赛任务书 2022年7月 一、竞赛时间、内容及成绩组成 &#xff08;一&#xff09;竞赛时间 本阶段竞赛时间共为8小时&#xff0c;参赛选手自行安排任务进度&#xff0c;休息、饮水、如厕等不设专…...

第18节:R语言分析:临床安全性数据的数据分析

临床安全性数据的数据分析 背景 医疗器械临床试验中收集的数据的主要组成部分是关于患者安全的。 不良事件被定义为“受试者、使用者或其他人的任何不良医疗事件、非预期疾病或伤害,或不良临床体征(包括异常实验室发现),无论是否与研究医疗器械相关”。 收集并用于此数据…...

36.悬浮板

悬浮板 html部分 <div class"container"><div class"square"></div> </div>css部分 *{margin: 0;padding: 0; } body{background-color: #111;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-it…...

BLE基础理论/Android BLE开发示例

参考&#xff1a;https://blog.csdn.net/qq_36075612/article/details/127739150?spm1001.2014.3001.5502 参考&#xff1a; https://blog.csdn.net/qq_36075612/article/details/122772966?spm1001.2014.3001.5502 目录 蓝牙的分类传统蓝牙低功耗蓝牙 蓝牙专业词汇&#xff…...

rocketmq 5.13任意时间延迟消息

原理是采用timewhile 实现的&#xff0c;源码分析可以参考 https://blog.csdn.net/sinat_14840559/article/details/129266105 除了useDelayLevel 已经默认改为false private boolean useDelayLevel false;官方示意代码在public class TimerMessageProducer for (int i 0;…...

小程序picker 在苹果手机不兼容 bug,按month时在iPhone 显示不正确及自动定位时间问题

如下图&#xff1a;点击弹出时间列表&#xff1a;日历控件点击选择显示1年1月 解决: 加上起始时间字段 <picker mode"date" value"{{date}}" start"1970-09-01" end"2030-09-01"></picker> 问题二&#xff1a; 还是&a…...

区块链服务网络的顶层设计与应用实践

日前&#xff0c;2023全球数字经济大会专题论坛&#xff1a;Web3.0发展趋势专题论坛暨2023区块链、元宇宙蓝皮书发布会在北京举行。本次论坛上隆重发布了《中国区块链发展报告&#xff08;2023&#xff09;》&#xff0c;对我国区块链行业在2022年的发展状况进行了总结梳理&…...

tomcat日志输出乱码

在Tomcat中&#xff0c;默认的字符编码可能导致应用参数日志出现乱码问题。这通常发生在接收来自客户端的请求参数&#xff0c;并将其记录到日志文件时。 Tomcat默认使用平台的默认字符编码&#xff0c;这可能是不稳定的&#xff0c;特别是当应用程序运行在不同的操作系统上时…...

Form1单例模式与互斥锁

一、使用mutex来解决。 如何让窗体Form1也是一个单例模式呢&#xff1f; 在窗体项目中找到Program.cs&#xff0c;双击。找到入口点&#xff0c;更改如下&#xff1a; [STAThread]private static void Main(){string mutexName "MyapplicatonMutexApp1121";usin…...

MySQL | 常用命令示例

MySQL | 常用命令示例 一、启停MySQL数据库服务二、连接MySQL数据库三、创建和管理数据库四、创建和管理数据表五、数据备份和恢复六、查询与优化 MySQL是一款常用的关系型数据库管理系统&#xff0c;广泛应用于各个领域。在使用MySQL时&#xff0c;我们经常需要编写一些常用脚…...

常见网关对比

常见网关对比 目前常见的开源网关大致上按照语言分类有如下几类&#xff1a; Nginxlua &#xff1a;OpenResty、Kong、Orange、Abtesting gateway 等 Java &#xff1a;Zuul/Zuul2、Spring Cloud Gateway、Kaazing KWG、gravitee、Dromara soul 等 Go &#xff1a;Janus、fa…...

【回归儿童本位,重构专业底色】学前教育行业的深度思辨与价值坚守(二)

吕坤阳亲笔二、行业高质量发展的核心&#xff1a;回归儿童&#xff0c;摒弃功利化教育随着学前教育普惠政策的推进&#xff0c;行业规范化程度不断提升&#xff0c;但功利化、形式化的教育倾向依然存在&#xff0c;成为高质量发展的阻碍。部分幼儿园为迎合家长“抢跑”需求&…...

Matlab/Simulink仿真BLDC电机:避开转速闭环控制的5个常见坑

BLDC电机转速闭环仿真避坑指南&#xff1a;从参数配置到结果验证的完整解决方案 在电机控制领域&#xff0c;BLDC&#xff08;无刷直流电机&#xff09;因其高效率、长寿命和低维护成本等优势&#xff0c;已成为工业自动化、电动汽车和消费电子等领域的主流选择。Matlab/Simul…...

3种Cookie管理方案对比:为什么本地导出才是开发者最佳选择?

3种Cookie管理方案对比&#xff1a;为什么本地导出才是开发者最佳选择&#xff1f; 【免费下载链接】Get-cookies.txt-LOCALLY Get cookies.txt, NEVER send information outside. 项目地址: https://gitcode.com/gh_mirrors/ge/Get-cookies.txt-LOCALLY 在Web开发和自动…...

RMBG-2.0多场景落地指南:短视频素材制作+电商主图抠图完整流程

RMBG-2.0多场景落地指南&#xff1a;短视频素材制作电商主图抠图完整流程 想快速给商品换个背景&#xff0c;又怕抠图不干净&#xff1f;想给短视频做个炫酷的片头&#xff0c;却被复杂的背景处理劝退&#xff1f;今天&#xff0c;咱们就来聊聊一个能让你彻底告别繁琐抠图的神…...

ComfyUI-FramePackWrapper功能选择指南:如何根据资源控制与使用便捷性选择最优方案

ComfyUI-FramePackWrapper功能选择指南&#xff1a;如何根据资源控制与使用便捷性选择最优方案 【免费下载链接】ComfyUI-FramePackWrapper 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-FramePackWrapper ComfyUI-FramePackWrapper作为一款高效的AI视频生成插…...

DynamicColor跨平台开发指南:iOS、macOS、watchOS的统一颜色解决方案

DynamicColor跨平台开发指南&#xff1a;iOS、macOS、watchOS的统一颜色解决方案 【免费下载链接】DynamicColor Yet another extension to manipulate colors easily in Swift and SwiftUI 项目地址: https://gitcode.com/gh_mirrors/dy/DynamicColor DynamicColor是一…...

初识Git,带你深入学习Git相关的知识

在之前的博客中&#xff0c;我都会在博客的开头放一个gitee的链接。Gitee是什么呢&#xff1f;它是一个远程的代码托管库。在我们学习和项目管理的时候起着非常重要的作用。 本期我就带领着大家一起学习Git相关的知识内容。学习它的操作&#xff0c;了解其在企业级开发中的作用…...

从NDVI到地表温度:用ENVI Band Math一次性搞定植被与热环境分析

ENVI波段运算实战&#xff1a;NDVI与地表温度的高效批量处理技巧 遥感影像分析中&#xff0c;植被指数和地表温度是最基础却又最关键的指标。传统操作流程往往需要反复切换不同工具模块&#xff0c;既耗时又容易出错。而ENVI的Band Math功能就像一把瑞士军刀&#xff0c;能将这…...

Phi-3-mini-4k-instruct-gguf开发者案例:为微信小程序后端提供的轻量API服务

Phi-3-mini-4k-instruct-gguf开发者案例&#xff1a;为微信小程序后端提供的轻量API服务 1. 项目背景与需求 在开发微信小程序时&#xff0c;我们经常需要为前端提供智能文本处理能力&#xff0c;比如自动生成商品描述、智能客服回复、内容摘要等。传统方案要么需要调用第三方…...

Windows右键菜单重构指南:从混乱到高效的ContextMenuManager实战

Windows右键菜单重构指南&#xff1a;从混乱到高效的ContextMenuManager实战 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 问题诊断&#xff1a;你的右键菜单是…...