解决element中el

2024-07-14 16:15| 来源: 网络整理| 查看: 265

文章目录项目说明问题描述解决方案总结

项目说明

【配置环境】

vue-cli^4.5.0，创建项目过程请参考 https://cli.vuejs.org/zh/vue^3.0.0， https://v3.cn.vuejs.org/element-plus，https://element-plus.gitee.io/#/zh-CN

注：本文只针对测试过的版本进行讲解，其他版本如有问题，可以留言或修改配置进行测试；

问题描述

通常情况下，element表单中el-input组件多次使用，而且同时出现有type为’text’和’password’的组合时，浏览器会自动填充已记录过的账号和密码，本身功能来讲是好意，但是有时我们就是不需要这样的功能，所以需要禁用掉！官方对于el-input组件有autocomplete属性帮助解决此问题，如图在这里插入图片描述填入 autocomplete=‘off’ 相关代码如下：

代码是这样写了，但是结果不尽人意，仍然没有效果，网上有类似的解决办法：密码模块做了修改 autocomplete=‘new-password’ ，但是又有了新问题，虽然页面上看起来正常了，打开后台看下呢，会有警告（注：记得以前我也这样解决过的，没有问题，但这次都是全新的版本尝试，可能源码处理方式不同了吧，[尴尬脸]），如图：在这里插入图片描述说白了就是你写了"new-password"不是官网给的标准值（on/off）；

解决方案

对于有强迫症的开发来讲，去掉不应该出现的警告还是有必要再动手试试的，通过预先设定readonly=true，el-input添加点击事件，当点击时改变readonly=false，至此输入框始终都不会出现自动填充的问题啦~ 最终解决代码如下：

登录 import { reactive, toRefs } from 'vue'; export default { name: 'FormIptAC', setup() { const formData = reactive({ username: '', password: '', readonly: true, }); const methods = reactive({ handlerIptClick: () => { formData.readonly = false; }, submitForm: () => { console.log('submitForm'); }, }); const refMehods = toRefs(methods); return { formData, ...refMehods, }; }, }; .form { padding: 10px 40px 10px 0; } 总结

完整代码，请到项目 demo 地址：https://gitee.com/feiyunan/blog-demo/tree/master/demo_02

【本文地址】

公司简介

联系我们