Vue el-input 使用伪元素插入间隔符

前端面试题汇总 总结了一下之前面试遇到的问题,方便自己也方便他人 阅读详情

老规矩先上效果图:

就是在输入框插入间隔符,小编使用css的伪元素进行操作

上代码:

<el-input placeholder="请输入用户名" v-model="loginForm.username"
          prefix-icon="el-icon-user" class="letLine">
</el-input>

伪元素letLine是个css属性样式

.letLine::before {
  content: "";
  width: 1px;
  height: 12px;
  position: absolute;
  top: 12px;
  left: 30px;
  background: #A1AFF9;
}

到此就结束了

Playwright选择器核心原理与抗变更实战指南 Web自动化中的选择器本质是语义定位而非DOM路径寻址。Playwright通过分层选择器体系(text=、role=、>>组合、:visible状态过滤)实现对动态前端的高鲁棒性匹配,其底层基于ARIA语义、文本可访问性及多级降级策略,显著优于传统CSS/XPath硬编码方案。该机制天然适配React/Vue等现代框架的组件化、Shadow DOM和动态渲染特性,支撑端到端测试、爬虫及RPA流程的长期稳定性。本文聚焦selector失效根因分析与生产级抗变更写法,涵盖text=模糊/精确匹配逻辑、role 阅读详情

相关推荐

SUMTEC:轻量级Web Components博客内嵌组件系统

Web Components 是现代前端实现跨框架、高复用、低耦合 UI 组件的核心标准,其基于浏览器原生 Custom Elements 和 Shadow DOM 的设计,赋予组件天然的封装性与长期兼容性。相比依赖构建工具、运行时框架或服务端渲染的方案,纯客户端 Web Components 具备零配置、零依赖、渐进增强等工程优势,特别适合静态博客、文档站点、技术笔记等长生命周期内容场景。SUMTEC 正是这一理念的典型实践——它以极简 ESM 模块形式提供阅读时长、本地化时间、自动生成目录等实用功能,所

chuji3953的博客 312

CSS中ID选择器的特异性原理与工程化使用指南

ID选择器是CSS中特异性(specificity)最高的原生选择器之一,其权重为(0,1,0,0),远超类选择器和标签选择器,构成样式层优先级决策的核心依据。它依赖浏览器ID哈希表实现O(1)快速匹配,但前提是HTML中ID必须全局唯一——重复ID将导致样式静默失效、JavaScript获取异常等隐蔽故障。在现代前端工程中,ID已从‘样式控制工具’回归为‘功能锚点标识符’,典型场景包括label for绑定、URL锚点跳转、SPA挂载点及Shadow DOM穿透。合理使用ID能提升可访问性与DOM操作稳定

weixin_34221036的博客 329

Playwright CSS选择器实战:从定位失败到稳定可靠的五维工程化实践

CSS选择器是自动化测试中元素定位的基础技术概念,其核心原理在于通过符合W3C标准的语法在DOM树中匹配目标节点。在Playwright中,该能力被深度增强并融入严格模式、可操作性预检、Shadow DOM穿透等工程化机制,显著提升定位的可靠性与可维护性。技术价值体现在降低脚本脆弱性、适配现代前端框架(如React/Vue)、支撑CI/CD稳定性保障。典型应用场景包括SPA表单交互、动态ID处理、多语言文本定位及Web Component集成。本文聚焦Playwright中CSS选择器的稳定性评估、分层管理

weixin_30274627的博客 437

element :el-input输入三位以,隔开并保留两位小数的数值

背景说明 领导想要这种效果,涉及金额的都是三位以,隔开并且保留两位小数,原来我是用el-input-number写的,因为value绑定的是number类型,而带分隔符的数字一定是string,所以必须换掉基础组件,由此变为el-input; 百度了下没有完全贴合需求的例子,所以我组合了下两位大佬的代码,在此记录一下,大佬链接在此: vue+element 中 el-input框 限制只能输入数字...

weixin_43824116的博客 3349

Ubuntu系统 nano 编辑器使用教程

• 原因:文件编码不兼容(如 Windows 的 CRLF 换行符)。• 若使用 SSH 工具(如 PuTTY),确保终端设置中未占用。掌握这些操作后,你可以高效使用 nano 完成大部分文本编辑任务!• 底部快捷键栏:显示常用操作的快捷键(• 如果文件已修改,会提示是否保存:按。• 顶部状态栏:显示文件名和编辑状态。表示 Ctrl + G(查看帮助)。保存时自动生成备份文件(原文件名后加。• 强制保存只读文件:用。启动 nano 时添加。启动 nano 时添加。(重做)触发自动缩进。

qq_44534541的博客 2083

微信中调起支付宝支付

微信中调用支付宝支付,首先我们知道微信是不能直接调用支付宝的,所以我们需要使用一个中间页提示用户在浏览器中打开,然后进行网页支付或打开app支付。以下为详细唤起支付宝的步骤、业务代码以及相关页面图。 如有问题欢迎评论留言,看到定回复哦^_^\(^o^)/~ 一、微信中唤起支付宝,有几个步骤: 1、中间页引导用户在浏览器中打开去唤起支付宝。 2、浏览器中打开支付宝或app中打开支付宝。 3...

han_calligrapher的博客 2万+

vue中对el-input输入的内容进行正则判断,两个字符中间有分隔符验证,楼层输入格式修改正则转换,判断前后字符之间,使用的是否为、:|/-如果不是则会取消

在vue中将输入的内容进行正则格式转换,这里主要是用来做楼层转换,传给后端的必须是某些格式,其中存数字,中间带、:|/-都可以,其他不行比如2-3这样,还会对总楼层等进行判断

qq_41180882的博客 1050

QCM6490平台DDR测试:从QDUTT配置到眼图分析的实战指南

本文详细介绍了QCM6490平台DDR测试的全流程,从QDUTT工具安装配置到眼图分析,提供了实战操作指南和常见问题解决方案。通过具体案例分享,帮助工程师掌握DDR测试技巧,确保内存稳定性,特别适用于物联网和边缘计算设备的开发调试。

weixin_33910191的博客 457

vue 字符串分割_嗯哼vue组件taginput包教不包会

5分钟实现一个Tag-Input(标签)组件前言本文是wo写组件设计的第一篇文章(处女作),之所以会写组件设计相关的文章,是因为作为一名优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去辛(dao)勤(gen)劳(huo)动(zhong),而是要根据已有前端的开发经验,总结出一套自己的高效开发的方法。作为数据驱动的领导者vue等MVVM框架的出现,帮我们减少了工作中大量的...

weixin_31967737的博客 524

免Root抓包神器Packet Capture:安卓App数据捕获全攻略

本文详细介绍了免Root安卓抓包神器Packet Capture的安装与使用全攻略。通过利用安卓系统的VPN Service API,该工具无需Root权限即可捕获并解密App的HTTP/HTTPS网络流量。文章从核心原理、证书安装、实战抓包步骤到结果分析与常见问题排查,提供了完整指南,是移动端开发、安全测试和数据分析的实用利器。

weixin_29232507的博客 1073

永久关闭Windows更新的5种方法

很多家用电脑,如果系统自动更新的话,会变得越来越卡顿,且硬件型号兼容也并不完美。那么我们该如何彻底关闭Win11的自动更新呢?以下准备了5种方法,您可以根据自身实际情况选择合适的方法!

qq_43652793的博客 1万+

Vue中实现输入框带输入建议

Vue中实现输入框带输入建议 ,三.调接口获取数据并处理数据(element规定使用value:值),将需要的数据给到value再push到上图标红线的数组中即可。二.根据element中的方法来使用(修改展示的数据即可) 图中标红的是自己定义的一个数组。一.在页面中使用element的输入框。...

qq_58671311的博客 1572

ubuntu20.04安装nvidia-docker(解决有 Release 文件。 N: 无法安全地用该源进行更新,所以默认禁用该源错误)

然后想都不要想,nvidia+linux安装的东西,那肯定是不能安装成功的,恶毒的nvidia。按照nvidia官网给出的安装nvidia-docker流程来。在sudo apt-get update出现报错。然后再次update,发现还是会有一些警告类似于。,直接点击网页手动下载,发现下载成功!,注意会有安装先后顺序,安装给的提示就行。最后输入命令发现安装成功。然后替换掉里面的内容。直接不管,直接上命令。

weixin_48144140的博客 1235

vue关于输入框的限制

点击按钮之前,卡一下提示 if (!(e && Number(e) > 0)) { this.$message.error("剂量异常,只能为数字!"); return; } 限制你输入的内容,通过正则输出 第一种 oninput="this.value=this.value.replace(/[^\d]/g,'')" 第二种 oninput="if(isNaN(value)) { value = value } if(value.inde...

weixin_46005006的博客 438

Cadence 设计实践笔记-小哥allegro 2层板笔记

规范建立文件夹本章节主要跟着B站PCB入门首选视频-小哥Cadence Allegro 2层板视频,结合自己的实践一步步完成一个完整的PCB板的设计。规范建立文件夹建立八个文件夹我使用的Cadence 17.4 有些差异原理图绘制原图绘制首先要熟悉原理图工作原理工作原理下面是这个项目的原理图重点关注电源新建原理图库打开Cadence 软件创建项目新建工程 File ==========》Project我这里选择了Enable PSPice 试试能不能仿真,新建项目如下。

我的专栏 1479

大规模SoC芯片Hierarchical Flow Calibre LVS教程

大规模SoC芯片Hierarchical Flow Calibre物理验证LVS实现教程

weixin_37584728的博客 1200

2026前端面试题!(附答案及解析)(2026.9月最新版)

文章目录1.JSONP原理2. cookie、sessionStorage、localStorage的区别3.link和a标签区别4 vue中的跨域问题5 webpack面试题6 浏览器与服务器的交互原理7 什么是CSS盒模型 >>> -IE盒模型和W3C盒模型8 A解释一下闭包,B为什么要使用闭包?9 解释一下作用域链10 如何处理不让别人盗用你的图片,访问你的服务器资源?11 如何优化网站性能vue路由面试题1.对于MVVM的理解?2 Vue的生命周期1 什么是vue生命

weixin_43617604的博客 8万+

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

DOM操作核心原理:属性、特性与样式的三层关系

DOM(文档对象模型)是浏览器将HTML解析为可编程JavaScript对象的核心机制。理解其底层原理,关键在于厘清属性(attributes)、特性(properties)和样式(styles)三者的本质差异与协同逻辑:属性对应HTML源码的静态文本,特性反映JS运行时的动态状态,而样式则需区分内联设置、CSS规则层叠与浏览器最终计算值。这种分层设计决定了为何setAttribute('value')无法更新输入框内容,而element.value可以;也解释了classList为何比className赋

weixin_30394981的博客 428

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

前端面试锦集

基本面试: 做过最满意的项目是什么?项目背景?为什么要做这件事情?最终达到什么效果?你处于什么样的角色,起到了什么方面的作用?在项目中遇到什么技术问题?具体是如何解决的? 如果再做这个项目,你会在哪些方面进行改善? 基础扎实: IT行业,哪些发展好的同学都是具备扎实基础知识,如果理解计算机基础会更好,因为我们面临很多非前端计算问题的。 主动思考: 被动完成任务成长会很慢的,需要有自己的想法,而不是仅仅是完成任务的。 自动学习: 前端领域知识淘汰速度很快,需要经常学习新知识。 追溯深度: 遇到问题是多研究背.

Front小思的博客 6724

js面试题收集

js面试题整理 链接 H5 新特性 50个css面试题 css优化,js优化以及web性能优化 js面试题知识点全解(一原型和原型链) 如何实现浏览器内多个标签页之间的通信? (阿里) WebSocket、SharedWorker; 也可以调用localstorge、cookies等本地存储方式; localstorge另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件, 我们通过监听...

weixin_44218695的博客 377

2026面试预判及实际面试

本文摘要总结了多个前端开发岗位的面试问题和答案,涵盖Vue3、ECharts、数据可视化、JavaScript核心概念等内容。 Vue3高频问题 组合式API相比选项式API的优势在于逻辑内聚、更好的TS支持和复用性。 状态管理推荐Pinia,轻量且支持组合式API风格。 动态路由和权限控制通过router.addRoute和路由守卫实现。 响应式原理基于Proxy和Reflect,解决了Vue2的局限性。 ECharts与数据可视化 性能优化包括数据聚合、懒渲染和dataZoom区域缩放。

Mr.小灰狼_随笔 579

CSS属性选择器:6种语法、工程价值与真实项目避坑指南

CSS属性选择器是Web前端中基于HTML属性进行元素匹配的核心机制,其原理是通过属性存在性、精确值、单词、连字符、前缀及子串等6种语义化模式实现静态声明式控制。相比类名和ID选择器,它天然契合组件化开发与状态驱动设计,显著提升样式与业务语义的一致性,降低JS-CSS耦合度。技术价值体现在无障碍适配(如[lang|="zh"])、主题系统(:root[data-theme])、表单验证([aria-invalid])和响应式断点([data-breakpoint])等关键场景。本文深入解析各语法差异、性能边

afhu47033的博客 425

【自用】HTML5+CSS3

当解析被阻塞的时候,浏览器会有一个轻量级的HTML(或CSS)扫描器(scanner)继续在文档中扫描,查找那些将来可能能够用到的资源文件的url,在渲染器使用它们之前将其下载下来。:元素选择器(1) + 元素选择器(1)+ 类选择器(10)+ ID选择器(100),权重为 112。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。,同时加载依赖的资源:CSS、图片等(加载资源的过程不会阻塞DOM解析),然后调用。为了减缓渲染被阻塞的情况,现代的浏览器都使用了。

luemeon的博客 625

CSS计数器:纯样式层实现多级自动编号与状态追踪

CSS计数器是W3C规范定义的渲染时变量机制,本质为作用域隔离的整数变量系统,依托counter-reset、counter-increment和content三要素协同工作。其核心价值在于将结构化编号逻辑从JavaScript脚本层下沉至浏览器布局阶段,避免DOM操作与重排开销,显著提升性能与SEO友好性。技术上支持多级嵌套、跨元素作用域继承及格式化输出(如decimal-leading-zero、circled-decimal),广泛应用于法律条文编号、面包屑导航、学术图表引用、表单选项标记等真实业务场

dengjuanshou7445的博客 431

vue中分割线的实现

项目中,需要实现分割线的效果,如图: 奈何 element 中的分割线用起来报错,无奈只好自己写,很简单,先说下原理: 给一个高为1像素的盒子,盒子宽度根据要求设定,再设置盒子颜色,排列方式为相对定位,盒子里设置文字给左右padding,并进行绝对定位到中间即可实现 看代码: <div class="tableTitle"><span class="midText"&...

zzqz的博客 3万+

vue elementUI el-card中el-input的位置居中

常规的el-card中放入el-input <el-card> <el-col :span="10"> <el-input ></el-input> </el-col> </el-card> 会导致输入框置于card的最底层,并不美观 此时我们可以嵌套一个el-row,效果就会完全不同 <el-card> <el-row> .

小懒魔王的博客 1万+
上一篇: mybatis 一对多 两种查询方式
下一篇: git提交项目被拒提示 refs/heads/master:refs/heads/master [remote rejected] (hook declined)Done
叫我阿龙啊
博客等级 码龄11年 179粉丝 62原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值