You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
1.8 KiB
105 lines
1.8 KiB
<template>
|
|
<view>
|
|
<view class="action">
|
|
<view class="pwd" @click="changeStatus">
|
|
<view v-for="(item,index) in unit"
|
|
:class="{pwd1:pwd.length>=(index+1), 'docus-border': (pwd.length == index) && inputStatus}"
|
|
class="number">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="input1">
|
|
<input :maxlength="unit"
|
|
@input="change1"
|
|
v-model="pwd"
|
|
v-show="true"
|
|
type="number"
|
|
:focus="inputStatus"
|
|
@blur="inputStatus = false"
|
|
@focus="inputStatus = true"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props:{
|
|
unit:{
|
|
type:Number,
|
|
default:6
|
|
},
|
|
focus:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
ontime:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
inputStatus: this.focus,
|
|
pwd:"",
|
|
pwd1:[]
|
|
}
|
|
},
|
|
methods:{
|
|
changeStatus(){
|
|
this.inputStatus=!this.inputStatus
|
|
},
|
|
change1(e){
|
|
this.pwd1=String(e.target.value).split('')
|
|
if(this.ontime){
|
|
this.$emit('change',e.target.value)
|
|
}else{
|
|
if(this.pwd1.length==this.unit){
|
|
this.$emit('change',e.target.value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.action{
|
|
width:686rpx;
|
|
margin: 0 auto;
|
|
.pwd{
|
|
width:100%;
|
|
height: 100rpx;
|
|
margin: 20rpx auto;
|
|
display: flex;
|
|
margin-bottom: 40rpx;
|
|
justify-content: space-between;
|
|
.number{
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100rpx;
|
|
position: relative;
|
|
border: 1rpx solid #979797;
|
|
border-radius: 5rpx;
|
|
}
|
|
.pwd1{
|
|
&::after{
|
|
position: absolute;
|
|
content: "";
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 50%;
|
|
background-color: #000;
|
|
}
|
|
}
|
|
.docus-border{
|
|
border: 4rpx solid #15716E;
|
|
}
|
|
}
|
|
}
|
|
.input1{
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|