之前密码框遇到浏览器记住密码加个隐藏的空密码框就可以解决问题,现在发现不行了。
每次鼠标获取焦点了就显示已经记住了的密码,如果是做某个动作前要先输入密码验证的话这就很搞笑了。
怎么解决:
1.使用text代替password
2.模拟password
以下是示例代码,不能直接在项目中使用,需要融入项目
<div class="password_wrap">
<div class="dot_wrap" v-if="password">
<span v-for="num of password.length" :key="num"></span>
</div>
<el-input
v-model="password"
clearable
>
</el-input>
</div>
<style lang="less" scoped>
.password_wrap {
position: relative;
}
.dot_wrap {
position: absolute;
left: 0;
bottom: 0;
z-index: 99;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding-left: 15px;
pointer-events: none;
span {
width: 5px;
height: 5px;
border-radius: 50%;
background: #000;
display: block;
margin-left: 2.5px;
}
}
.password_wrap /deep/ .el-input__inner {
color: transparent;
caret-color: #333333;
}
</style>
最终效果如下: