测试常见前端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>

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

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

相关文章

为 Google Play 即将推出基于区块链的内容政策做好准备

作者 / Joseph Mills, Group Product Manager, Google Play 作为一个平台&#xff0c;Google Play 一直致力于帮助开发者将创新理念变为现实。Google Play 上托管了许多和区块链相关的应用&#xff0c;我们深知合作伙伴们希望扩展这些应用&#xff0c;并利用 NFT 等代币化数字资…

使用WGCLOUD监测安卓(Android)设备的运行状态

WGCLOUD是一款开源运维监控软件&#xff0c;除了能监控各种服务器、主机、进程应用、端口、接口、docker容器、日志、数据等资源 WGCLOUD还可以监测安卓设备&#xff0c;比如安卓手机、安卓设备等 我们只要下载对应的安卓客户端&#xff0c;部署运行即可&#xff0c;如下是下…

Vue3 Radio单选切换展示不同内容

Vue3 Radio单选框切换展示不同内容 环境&#xff1a;vue3tsviteelement plus 技巧&#xff1a;v-if&#xff0c;v-show的使用 实现功能&#xff1a;点击单选框展示不同的输入框 效果实现前的代码&#xff1a; <template><div class"home"><el-row …

优化 SQL 体验:五款 AI 驱动工具助力 SQL 查询

SQL AI 工具能够极大提高跟数据和数据库打交道人员&#xff08;e.g. 数据分析师、数据科学家、数据库管理员、开发者&#xff09;的效率和生产力&#xff0c;比如可以根据自然语言输入自动生成 SQL 查询&#xff08;非技术用户也能轻松访问和分析数据了&#xff01;&#xff09…

【分布式能源的选址与定容】基于多目标粒子群算法分布式电源选址定容规划研究(Matlab代码实现)

目录 &#x1f4a5;1 概述 1.1 功率损耗 ​编辑1.2 电压质量 1.3 DG总容量 &#x1f4da;2 运行结果 &#x1f308;3 Matlab代码实现 &#x1f389;4 参考文献 &#x1f4a5;1 概述 参考文献&#xff1a; 本文采用的是换一个算法解决&#xff0c; 基于基于多目标粒子群算法分布…

AB 压力测试

服务器配置 阿里云Ubuntu 64位 CPU1 核 内存2 GB 公网带宽1 Mbps ab -c100 -n1000 http://127.0.0.1:9501/ -n&#xff1a;在测试会话中所执行的请求个数。默认时&#xff0c;仅执行一个请求。 -c&#xff1a;一次产生的请求个数。默认是一次一个。 ab -c 100 -n 200 ht…

Doris注意事项,Doris部署在阿里云,写不进去数据

1.Doris官网 Doris官网https://doris.apache.org/ 2.根本原因 本地idea访问FE&#xff0c;FE会返回BE的地址&#xff0c;但是在服务器上通过ip addr查看&#xff0c;发现只有局域网IP&#xff0c;所以FE返回了局域网的IP&#xff0c;导致idea连接不上BE 3.解决办法 重写Ba…

二十三章:抗对抗性操纵的弱监督和半监督语义分割的属性解释

0.摘要 弱监督语义分割从分类器中生成像素级定位&#xff0c;但往往会限制其关注目标对象的一个小的区域。AdvCAM是一种图像的属性图&#xff0c;通过增加分类分数来进行操作。这种操作以反对抗的方式实现&#xff0c;沿着像素梯度的相反方向扰动图像。它迫使最初被认为不具有区…

10. Mybatis 项目的创建

目录 1. Mybatis 概念 2. 第一个 Mybits 查询 2.1 创建数据库和表 2.2 添加 Mybatis 框架支持 2.3 添加配置文件 2.4 配置 MyBatis 中的 XML 路径 2.5 添加业务代码 在学习 Mybatis 之前&#xff0c;我们需要知道 Mybatis 和 Spring 没有任何的关系。如果一定要强调二者…

建造者设计模式 + 高阶函数 => DSL

该设计模式适用于创建复杂对象&#xff0c;该复杂对象通常是由各个部分的子对象用一定的算法或者步骤构成&#xff0c;针对每个子对象内部算法和步骤通常是稳定的&#xff0c;但是该复杂对象的确实由于不同的需求而选择使用不同的子对象进行组装。对于构建该复杂的对象&#xf…

20.0 HTTP 通信

1. web开发 1.1 web开发介绍 Web指的是World Wide Web(万维网), 是一种基于互联网的信息系统. 万维网由一系列通过超文本链接相互连接的页面组成, 这些页面中包含了文本, 图像, 音频, 视频等多媒体内容. 用户可以通过浏览器访问万维网上的网页, 并通过超链接在不同页面之间导…

Golang速成

目录 Golang 语言特性Golang的优势Golang 的应用场景Golang 的不足 基础语法变量的声明常量与 iotastring字符串遍历strings 包bytes 包strconv 包unicode 包 循环语句range 函数多返回值init 函数闭包import 导包匿名函数 指针defer切片 slice数组sliceslice 操作… mapmap 的…

数据结构基础知识、名词概述

1.1 基本概念和术语1.1.1 数据、 数据元素、 数据项和数据对象1.1.2 数据结构1.1.3 数据类型和抽象数据类型 1.2 抽象数据类型的表示与实现1.3 算法与算法分析&#xff08;1&#xff09;1.4 算法与算法分析&#xff08;2&#xff09;1.5 算法与算法分析&#xff08;3&#xff0…

pytest 自定义HOOK函数

除了系统提过的HOOK函数外&#xff0c;也可以通过自定义HOOK的方式实现想要的功能。 首先创建一个py文件&#xff0c;里面定义自己的HOOK函数&#xff0c;主要pytest里面的hook函数必须以pytest开头。 #myhook.pydef pytest_myhook(user):"""自定义HOOK函数&q…

LeetCode[面试题04.08]首个共同祖先

难度&#xff1a;Medium 题目&#xff1a; 设计并实现一个算法&#xff0c;找出二叉树中某两个节点的第一个共同祖先。不得将其他的节点存储在另外的数据结构中。注意&#xff1a;这不一定是二叉搜索树。 例如&#xff0c;给定如下二叉树: root [3,5,1,6,2,0,8,null,null,7,…

51单片机--AD/DA

AD/DA介绍 AD和DA是模拟信号和数字信号之间的转换过程。 AD&#xff0c;全称为模拟到数字&#xff08;Analog-to-Digital&#xff09;&#xff0c;指的是将模拟信号转换为数字信号的过程。在AD转换中&#xff0c;模拟信号经过采样、量化和编码等步骤&#xff0c;被转换为离散的…

C语言基础入门详解三

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 一、C语言之函数指针 #include<stdio.h> #include<stdlib.h> /**函数指针 …

百度文心一言接入教程-Java版

原文链接 前言 前段时间由于种种原因我的AI BOT网站停运了数天&#xff0c;后来申请了百度的文心一言和阿里的通义千问开放接口&#xff0c;文心一言的接口很快就通过了&#xff0c;但是文心一言至今杳无音讯。文心一言通过审之后&#xff0c;很快将AI BOT的AI能力接入了文心…

uniapp使用echarts

uniapp使用echarts 1.下载资源包2.引入资源包3.代码示例注意事项 1.下载资源包 https://echarts.apache.org/zh/download.html 2.引入资源包 将资源包放入项目内 3.代码示例 <template><div style"width:100%;height:500rpx" id"line" ref&…

【网络】应用层——HTTP协议

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《网络》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; &#x1f3c0;认识HTTP协议 上篇文章中&#xff0c;本喵带着大家对HTTP有了一个初步的认识&#xff0…