MyClassPHP官网

查看: 48421|回复: 0

我是一个不只精通前端的养猪老板

[复制链接]

1

主题

1

帖子

20

积分

新手上路

Rank: 1

积分
20
发表于 2020-7-22 11:01:12 | 显示全部楼层 |阅读模式
本帖最后由 mumu 于 2020-7-22 11:05 编辑

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>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> -->
<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>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表