element-ui的el-input组件type为password时自动填充问题

element-ui的el-input组件type为password时自动填充问题

  • 直接上代码
<el-form :model="passwordForm" :rules="rules" ref="form" label-width="80px">
   <el-form-item label="登录用户">
       <el-input v-model="passwordForm.userName" disabled></el-input>
   </el-form-item>
   <el-form-item label="原密码" prop="oldPassword">
       <el-input type="password"
        v-model="passwordForm.oldPassword"
        auto-complete="new-password"
        ></el-input>
   </el-form-item>
   <el-form-item label="新密码" prop="password">
       <el-input type="password"
        v-model="passwordForm.password" 
        auto-complete="new-password"
        ></el-input>
   </el-form-item>
	<el-form-item label="确认密码" prop="checkPass">
	   <el-input type="password"
	    v-model="passwordForm.checkPass"
	    auto-complete="new-password"
	    ></el-input>
	</el-form-item>
</el-form>
  • 关键就是添加auto-complete="new-password"属性值
  • 记录日常小bug ,你学废了吗?
Element-UI是一个流行的基于Vue.js的前端组件库,其中`el-input`是用于创建各种输入元素如文本框、密码输入、搜索框等的基本组件。如果在使用过程中遇到`el-input`组件失效的情况,可能有以下几个原因: 1. **未正确安装或引入**: 确保已正确安装Element UI并将其添加到项目中。如果是Vue项目,可以在`main.js`文件中导入并注册。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 2. **组件绑定错误**: 检查你的HTML模板中是否正确地使用了`v-model`指令来双向数据绑定,例如: ```html <el-input v-model="inputValue" placeholder="请输入内容"></el-input> ``` 确保`inputValue`是在Vue实例中的响应式数据。 3. **props配置问题**: 如果你自定义了一些属性传递给`el-input`,确认这些属性名和值设置无误。 4. **样式冲突**: 其他CSS样式可能会覆盖Element-UI的样式,检查是否有其他样式表干扰到了输入框的显示。 5. **版本兼容性**: 确保使用的Element-UI版本与项目的Vue版本兼容,不匹配可能导致某些组件无法正常工作。 6. **浏览器兼容性问题**: 测试一下是否在所有预期的浏览器环境下都能正常显示,有些CSS特性可能在旧版浏览器中不受支持。 如果你已经排除了上述常见问题但依然遇到问题,可以尝试提供更具体的代码片段或描述问题出现的具体场景,这样我能更好地帮助你定位问题。接下来是一些相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值