vue实现登录页阻止/避免浏览器对输入框的自动填充(element UI)
vue实现登录页阻止浏览器自动填入1. 效果图2. 详细解析2.1 输入框代码2.2 参数说明3. 完整代码1. 效果图浏览器自动填入的效果图如下:2. 详细解析2.1 输入框代码<el-form-item label="登录名" prop="idNo"><el-input v-model="loginForm.idNo" placeholder="请输入邮箱/手机号/登录名"&
·
1. 效果图
浏览器自动填入的效果图如下:
2. 详细解析
2.1 输入框代码
<el-form-item label="登录名" prop="idNo">
<el-input v-model="loginForm.idNo" placeholder="请输入邮箱/手机号/登录名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" placeholder="请输入密码" show-password autocomplete="new-password"></el-input>
</el-form-item>
关键的代码是: autocomplete="new-password"
2.2 参数说明
参数 | 说明 |
---|---|
label-position | label的对齐方式 |
show-password | 是否显示切换密码图标 |
autocomplete | 原生属性,自动补全 |
autocomplete="off"
可避免浏览器对输入框的自动填充
若autocomplete="off"
不起作用时,可修改为autocomplete="new-password"
。
3. 完整代码
<template>
<div class = "login-page">
<div style="padding-bottom: 72px;">
<img src="../assets/img/login-name.png" />
</div>
<div class="login-page-center">
<el-form :label-position="labelPosition" label-width="80px" :model="loginForm" ref="loginForm" :rules="rules">
<div style="text-align: center;font-size: 26px;color: #323233;">
<span>登录</span>
</div>
<el-form-item label="登录名" prop="idNo">
<el-input v-model="loginForm.idNo" placeholder="请输入邮箱/手机号/登录名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" placeholder="请输入密码" show-password autocomplete="new-password"></el-input>
</el-form-item>
<el-button class="login-page-button" type = "primary" :loading="confirmLoading" @click = "handleSubmit">登 录</el-button>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {
confirmLoading:false,// 提交按钮状态
labelPosition: 'top',
loginForm: {
idNo: undefined,
password: undefined,
},
rules: {
idNo: [
{ required: true, message: '请输入邮箱/手机号/登录名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
handleSubmit() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.confirmLoading = true;
this.$api.req("login/do", this.loginForm).then(response => {
if (response.data.httpStatus === 200) {
this.$message.success(response.data.message);
this.$router.push("/wts/answerChamber");
}
}).catch(() => {
this.confirmLoading = false;
})
}
});
},
}
}
</script>
<style lang = "less">
.login-page{
width: 100%;
height: calc(100vh);
z-index: -10;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background: url(../assets/img/login-bg.png) no-repeat center center fixed;
/* 让子级垂直居中 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-size: 100% 100%;
.login-page-center{
width: 420px;
height: 393px;
overflow: hidden;
background: #ffffff;
form{
padding: 44px 50px 56px 50px;
.login-page-button{
margin-top: 42px;
width: 320px;
height: 38px;
background: #4480E6;
border-radius: 2px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 16px;
}
.el-input__inner{
height: 40px;
}
.el-form-item__label{
padding: 17px 0 8px 0!important;
line-height: 20px;
font-size: 14px;
color: #323233;
}
.el-form-item{
margin-bottom: 0!important;
}
}
}
}
</style>
更多推荐
已为社区贡献12条内容
所有评论(0)