vue页面开发中前端交互输入交易密码的快速实现方法

作者：粉忆天魔黑兔发布时间: 2020-04-07 阅读：

vue下前端ui快速实现数字交易密码以下是实现代码

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title></title>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
.password{
margin: 50px;
}
.password input{
outline: none;
height: 0;
width: 0;
border: none;
margin: 0;
}
.password label{
display: block;
}
.pasbox{
display: inline-block;
width: 20px;
height: 20px;
background: #ddd;
margin-right: 5px;
text-align: center;
}
.pasbox.outlined{
box-shadow: 0 0 2px blue;
}
.pasbox.lodin::before{
content: "";
display: block;
width: 1px;
height: 14px;
margin: 3px auto;
background: #666;
animation: blurs 0.8s linear infinite;
}
@keyframes blurs{
0% {opacity: 1;}
20% {opacity: 0;}
}
.pasbox.loded::after{
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 8px;
margin: 5px auto;
background: #666;
}
</style>
</head>
<body>

<div id="app">
<div class="password">
<label>
<input
type="text"
v-model="data.paswd"
@blur="inputfocus=false"
@focus="inputfocus=true"
oninput="if(value.length>=6){value=value.slice(0,6);}"
/>
<div class="pasbox" v-for="v in 6" :class="{'outlined':data.paswd.length==v && inputfocus,'loded':data.paswd.length>=v,'lodin':inputfocus && v==data.paswd.length+1}"></div>
</label>
</div>

</div>

<script>

new Vue({
el:'#app',
data:{
data:{
paswd:'',
},
inputfocus:false,//当前是否对input进行输入即focus是否触发
},
mounted(){
this.$nextTick(()=>{

});
},
methods:{

},
}
});
</script>
</body>
</html>

文章地址：http://blog.yunzhancms.com/index.php?s=/Article/detail/id/315 欢迎转载，转载时请注明出处

分享到：