Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法
更新时间：2022年09月07日 09:33:23 作者：潮汐未见潮落
自己写了一个管理系统,登录成功之后,浏览器提示我保存账号密码,每次登录时就会自动回填记住的账号密码,方便用户快速登录,下面这篇文章主要给大家介绍了关于Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法,需要的朋友可以参考下
问题描述
通常情况下，浏览器会默认将已保存的账号密码 填充到 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;
}
}总结
到此这篇关于Element中el-input密码输入框浏览器自动填充账号密码问题解决的文章就介绍到这了,更多相关Element el-input密码输入框自动填充内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了vscode自定义vue模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
vue3基于elementplus 简单实现表格二次封装过程
公司渲染表格数据时需要将空数据显示‘-’,并且对于每一列数据的显示也有一定的要求,基于这个需求对element-plus简单进行了二次封装,这篇文章主要介绍了vue3基于elementplus 简单实现表格二次封装过程,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了Vue全局事件总线$bus安装与应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了vue实现实时上传文件进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue2与vue3中获取模版引用ref的方法与区别,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
我们在开发中经常会遇到通过点击某个按钮或者文字实现图片的预览功能,这里我们分别介绍vue2和vue3里面如何实现图片预览方法,需要的朋友可以参考下2023-09-09
Vue中使用JWT进行身份认证也是一种常见的方式,它能够更好地保护用户的信息,本文主要介绍了Vue开发中Jwt的使用详解,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
本文主要介绍了Vue中使用Element的Table组件实现嵌套表格,通过type="expand"设置了一个展开按钮,点击该按钮会显示与当前行关联的子表格内容,感兴趣的可以了解一下2024-01-01
vue项目中vue-echarts讲解及常用图表实现方案(推荐)
这篇文章主要介绍了vue项目中vue-echarts讲解及常用图表方案实现,主要针对代码示例中的内容进行问题讲解，详细代码在文章中给大家提到，需要的朋友可以参考下2022-09-09
Vue3的Effect是其响应式系统的核心,负责依赖追踪和自动响应,它通过ReactiveEffect类封装副作用逻辑,实现依赖收集和触发更新,本文介绍vue 3 effect作用与原理解析,感兴趣的朋友一起看看吧2025-02-02
最新评论