οnfοcus=“this.removeAttribute(‘readonly’);” readonly
初始化为只读,当聚焦时去掉只读属性,只读可以防止浏览器自动填充。
-webkit-text-security:指定要使用的形状来代替文字的显示
none 无。
circle 圆圈。
disc 圆形。
square 正方形。
<el-form-item prop="password">
<el-input
:key="passwordType"
ref="password"
:type="passwordType"
v-model="loginForm.password"
placeholder="请输入密码"
no-autocomplete
name="password"
tabindex="2"
auto-complete="off"
readonly
onfocus="this.removeAttribute('readonly');"
:class="pwdClass==true?'no-autofill-pwd':'no-auto2'"
clearable
/>
<span class="show-pwd" @click="showPwd">
<svg-icon
:icon-class="passwordType === 'text' ? 'eye' : 'eye-open'"
/>
</span>
</el-form-item>
data(){
return{
passwordType: "text",
pwdClass:true,
}
},
methods:{
showPwd() {
if (this.passwordType === "text") {
this.passwordType = "";
this.pwdClass = false
} else {
this.pwdClass = true
this.passwordType = "text";
}
this.$nextTick(() => {
this.$refs.password.focus();
});
},
}
.show-pwd {
position: absolute;
right: 10px;
top: 3px;
font-size: 16px;
color: #138a7a;
cursor: pointer;
user-select: none;
}
.no-autofill-pwd {
-webkit-text-security: disc !important;
}
.no-auto2 {
-webkit-text-security: none !important;
}