用的vue+element框架
<template>
<div class="login-wrap">
<h2 class="dlone">登录</h2>
<div class="iconcard">
<i class="el-icon-bank-card"></i>
<p>{{logining}}</p>
</div>
<el-input type="password" v-model="namecard" @keyup.native.enter="submitForm" size="large" ref="input" @blur="blur" class="cardinput" @focus="stopKeyborad">
</el-input>
<div class="bottom">
<p>MES生产执行系统 泛米科技(上海)有限公司 沪ICP备16000896号-1</p>
<p>Copyright © 2016-2020 FANMI Science And Technoolgy CO., TLD. All Rights Reserved.</p>
</div>
</div>
</template>
<script>export default {
data: function() {
return {
namecard:"",
logining:"请扫工牌登录",
};
},
mounted() {
/*强制获取焦点*/
this.Forcedfocus()
},
methods: {
/*焦点变只读,不弹出键盘 在改变状态*/
stopKeyborad(e) {
e.target.setAttribute('readonly', true);
setTimeout(() => {
e.target.removeAttribute('readonly');
}, 100);
},
/*失去焦点触发*/
blur() {
/*防止提交失去焦点*/
if(this.namecard == ""){
this.Forcedfocus()
}
},
/*焦点事件*/
Forcedfocus(){
this.$nextTick(() => {
this.$refs.input.focus()
})
},
submitForm() {
if(this.namecard !== ""){
this.logining="身份识别中,请稍后…"
this.$message.success('登录成功');
localStorage.setItem('ms_username', this.namecard);
this.$router.push('/');
}else{
this.$router.push('/loginerror');
alert("滚,你不扫码")
}
},
},
};
</script>
<style scoped>
.dlone{
padding-left:20px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #EBEEF5;
}
.cardinput{
float: left;
width: 10px;
position: absolute;
left: -100px;
}
.iconcard>i{
font-size: 150px;
color: #D3D4D6;
display: block;
text-align: center;
}
.iconcard>p{
font-size: 25px;
color: #D3D4D6;
text-align: center;
}
.iconcard{
margin-top: 30vh;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
background: #333333;
padding: 20px 0;
text-align: center;
}
.bottom>p {
color: #999;
font-size: 14px;
}
.login-wrap {
position: relative;
width: 100%;
height: 100%;
background-size: 100%;
background: #ffffff;
}
</style>