vue 登陆禁止弹出保存密码框及禁止默认填充密码

发布时间:2024年01月11日

在这里插入图片描述
在这里插入图片描述
ο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;
}
文章来源:https://blog.csdn.net/qq_43030908/article/details/135524105
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。