解决 Element的el-input 密码输入框浏览器自动填充账号密码问题

news/2024/5/20 1:55:15/文章来源:https://blog.csdn.net/qq_52855464/article/details/126669016

问题描述

        通常情况下,浏览器会默认将已保存的账号密码 填充到 input    type 值为password的输入框内,如果在登录页面,这当然是非常好的,自动填充密码可以节约时间,提高良好的使用体验,这样当然是没有什么问题的

但是如果在注册页面、新增账号等页面,这种操作 就是超出需求了(有点多此一举)

 <div class="main-side"><div class="login-location"><!-- $refs.pass.focus()  按下回车 自动聚焦 密码框  --><el-input @keyup.enter.native="$refs.pass.focus()" v-model="account" placeholder="用户名"></el-input></div><div class="login-location"><el-input ref="pass" @keyup.enter.native="userLogin()" v-model="password" type="password" placeholder="密码"></el-input></div></div>

 解决方法

auto-complete="new-password"

 在 type passworld input 中加 auto-complete="new-password" 属性即可


添加一个类

给密码框加入一个 class,之后写 css  

/deep/

使用了外届的组件或者自己开发一个组件,修改一处就可能会影响到用这个组件的所有样式,所以就需要有一个方法或者方式,既不影响到别的地方,又能修改子组件在当前的样式。/deep/ 就能实现,这样就不会影响项目里使用这个公共组件的其他地方的样式

.新加的类 {/deep/ .el-input__inner {-webkit-text-security:disc!important;} 
}

文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会 一 一 回复

文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力     长路漫漫,道阻且长

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

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

相关文章

Spring Cloud Gateway 网关整合 Knife4j

文章目录1&#xff1a;环境准备2&#xff1a;gateway服务设置1&#xff1a;导包2&#xff1a;yml配置3&#xff1a;添加配置类&#xff0c;从网关服务中获取服务列表4&#xff1a;重写并覆盖/swagger-resources接口3&#xff1a;其他业务逻辑服务设置1&#xff1a;其他服务导包…

【Unity面试】 Unity基础核心 | 面试真题 | 全面总结 | 建议收藏

你知道的越多&#xff0c;你不知道的越多 &#x1f1e8;&#x1f1f3;&#x1f1e8;&#x1f1f3;&#x1f1e8;&#x1f1f3; 点赞再看&#xff0c;养成习惯&#xff0c;别忘了一键三连哦 &#x1f44d;&#x1f44d;&#x1f44d; 文章持续更新中 &#x1f4dd;&#x1f4dd;…

springboot项目如何打包成.sh脚本形式运行|assemly插件打包自定义脚本参数

0. 引言 springboot作为目前主流的java开发框架&#xff0c;因为便捷和易上手的特性&#xff0c;深受开发者欢迎。springboot默认以jar包形式&#xff0c;通过java -jar指令运行 但这样的启动方式实际上不是很友好&#xff0c;我们常常看到各类组建通过bin目录下的start.sh脚…

阿里、腾讯、百度大厂的程序员编程指南规范

众所周知&#xff0c;现在软件行业不仅要求功能完成&#xff0c;对代码规范也是要求非常高的。一个编程规范不仅是代码美观、易读&#xff0c;在调试bug、程序安全等方面都是有影响的。比如&#xff1a;代码中的魔法数字&#xff0c;要求提取枚举、SQL语句要求不能采用拼接方式…

我开发了一个下载器 带宽拉满

大家好&#xff0c;我是 jonssonyan&#xff0c;一个痴迷软件技术的人。今天和大家分享一个我之前开发的 PC 端下载器。 准确的说是一款基于 AriaNg 和 Aria2 的 PC 端下载器。目前只支持 Windows 平台&#xff0c;我给它取名叫Aria2-X&#xff0c;并且将代码开源在 GitHub 上…

YOLOv7改进之二十五:引入Swin Transformer

​前 言&#xff1a;作为当前先进的深度学习目标检测算法YOLOv7&#xff0c;已经集合了大量的trick&#xff0c;但是还是有提高和改进的空间&#xff0c;针对具体应用场景下的检测难点&#xff0c;可以不同的改进方法。此后的系列文章&#xff0c;将重点对YOLOv7的如何改进进行…

终于拿到了爆火全网的进一线大厂程序员必看的1700道java面试题

爆火全网的进一线大厂程序员必看的1700道java面试题到底有多牛&#xff1f; 牛不牛不敢说&#xff0c;但是有好多程序员是靠这一套1700道高频面试题&#xff0c;顺利收到很多大厂offer&#xff01; 以至于&#xff0c;到现在为止&#xff0c;大厂都开始按照这一套1700道面试题…

北京十大靠谱律师事务所排名(口碑榜单)

律师行业很多人并不太了解&#xff0c;其实简单的案件一般不需要律师有丰富的经验积累&#xff0c;因此委托入行不久的年轻律师&#xff0c;他们能花更多时间去帮你处理&#xff0c;态度好&#xff0c;更重要的是收费低。 复杂的或者涉及金额特别大的案子委托资深律师。当然不是…

【Lua 入门基础篇(十)】文件I/O

文章目录一、文件 I/O二、简单模式1. io.lines([filename])三、完全模式1. file:lines()一、文件 I/O Lua I/O 库用于读取和处理文件。分为简单模式、完全模式。 简单模式&#xff08;simple model&#xff09;&#xff1a;拥有一个当前输入文件和一个当前输出文件&#xff0c…

倾向得分匹配PSM案例分析

倾向得分匹配(PSM)&#xff0c;是一种模仿RCT随机对照试验随机化分组&#xff0c;提高组间均衡性&#xff0c;进而达到降低混杂因素影响目的一种数据处理策略。PSM在计量研究&#xff0c;临床医学等领域有着广泛的应用。 1.案例背景与分析策略 1.1 案例背景介绍 某企业想评价…

IDEA编译项目找不到符号

问题描述 场景: 某个bean添加了一个字段; idea使用Git拉取代码后,新建分支提交,然后修改再切换其他分支,发生了代码冲突; 然后解决代码冲突,开始编译项目,报错找不到符号. 问题分析 1.查看控制台日志输出,找报错代码行。 2.lombok插件注解未生效。 3.编码问题; 4.jdk…

vue基础语法(上)

目录 一、插值 1、文本 2、html 3、属性 4、表达式 5、class绑定 6、style绑定 二、指令 1、核心指令 注&#xff1a;v-show和v-if区别 三、过滤器 1、全局过滤器 2、局部过滤器 四、计算属性与监听属性 1、计算属性 2、监听属性 3、计算属性和监听属性的区别 …

李沐d2l(十一)--锚框

文章目录一、概念二、代码1 生成锚框2 IoU(交互比)3 将真实边界框分配给锚框4 标记类和偏移5 应用逆偏移变换来返回预测的边界框坐标6 nms7 将非极大值抑制应用于预测边界框一、概念 在目标检测算法中&#xff0c;通常会在输入图像中采样大量的区域&#xff08;生成多个边缘框&…

ELASTICSEARCH快速入门

1. ELASTICSEARCH 1、安装elastic searchdokcer中安装elastic search (1)下载ealastic search和kibana docker pull elasticsearch:7.6.2docker pull kibana:7.6.2 (2)配置 mkdir -p /mydata/elasticsearch/config 创建目录mkdir -p /mydata/elasticsearch/dataecho "…

fastapi+mongo+qlib:体系化构建AI量化投研平台

百天计划之第34篇&#xff0c;关于“AI量化投资研究平台”建设。 从今天开始要开始一条主线——就是开始搭建整个投研平台。 如果说8月开始是知识点的梳理&#xff0c;一些基础技术的准备&#xff08;以qlib和机器学习为核心&#xff09;&#xff0c;9月开始重点是“以解决真…

.NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。

更新数据 第一种&#xff1a; 先从数据库中取出数据&#xff0c;然后再更新字段。效率较低&#xff0c;需要2次数据库操作&#xff1b; Entities&#xff1a;就是EF实体数据模型 using (var db new Entities()) { var data db.Member.Find(5); data.Name “new name”; db.…

基于Springboot+vue的玩具销售商城网站 elementui

爱玩儿是所有孩子的天性。尤其是在婴幼儿阶段。选择一个好的玩具&#xff0c;不仅能够让孩子玩儿的开心&#xff0c;而且有助于孩子智力的开发。很多家长在选择玩具的时候&#xff0c;不知道选择什么样的玩具。且当前玩具市场的玩具鱼目混杂&#xff0c;种类繁多&#xff0c;而…

cmake和makefile区别和cmake指定编译器(cmake -G)

一 cmake和makefile区别 要说明区别,我们先要区分下面三类工具: 1.项目构建生成工具 首先cmake是项目构建生成工具,cmake的代码可以与平台系统和编译器无关。类似cmake的工具还有autotools、qmake、GN,其中qmake已基本由cmake替代。cmake下载地址 cmake.org.cn 也就是说cma…

1.初识jQuery

jQuery是JS的库&#xff0c;封装了原生JS的一些DOM方法&#xff0c;使JS用起来更方便 目录 1 下载jQuery 2 jQuery的基本使用方式 3 jQuery入口函数 1 下载jQuery jQuery官网 jQuery 点击这里进入下载页面&#xff0c;我当前的版本为 3.6.1&#xff0c;如果你想下载之…

2022极端高温!人工智能如何预测森林火灾?| 万物AI

&#x1f4a1; 作者&#xff1a;ShowMeAI编辑部 &#x1f4e2; 声明&#xff1a;版权所有&#xff0c;转载请联系平台与作者并注明出处 &#x1f4e2; 收藏ShowMeAI查看更多精彩内容 8月21日晚&#xff0c;重庆北碚区山火一路向国家级自然保护区缙云山方向蔓延。为守护家园&…