<template>
<div class="classnumber">
<div class="v-code">
<input
ref="vcode"
id="vcode"
type="tel"
maxlength="codeLength"
v-model="aCodes"
@focus="focused = true"
@blur="focused = false"
:disabled="telDisabled"
:placeholder="placeholder"
:class="{'on':focused||aCodes}"
/>
<label
v-show="focused||aCodes"
for="vcode"
class="line"
v-for="(item,index) in codeLength"
:key="index"
:class="{'animated': focused && cursorIndex === index}"
v-text="codeArr[index]"
></label>
</div>
</div>
</template>
<script>
export default {
props: {
codeLength: {
type: Number,
default: 4
},
placeholder:{
type:String,
default:''
}
},
data() {
return {
aCodes: "",
telDisabled: false,
focused: false
};
},
model: {
prop: "value", //绑定的值,通过父组件传递
event: "update2" //自定义名 可以随便改
},
computed: {
codeArr() {
return this.aCodes.split("");
},
cursorIndex() {
return this.aCodes.length;
}
},
watch: {
aCodes(newVal, oldVal) {
if (newVal.length > this.codeLength||!Number(newVal)) {
this.aCodes = oldVal;
return false;
}
this.$emit("update2", newVal);
}
}
};
</script>
<style lang="scss">
.v-code {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.v-code input {
position: absolute;
border-bottom: vh(1) solid $borderColor;
color: #181818;
height: 32px;
line-height: 32px;
outline: none;
width: 100%;
font-size: vh(22);
}
.v-code .on {
opacity: 0;
}
.v-code .line {
position: relative;
width: 40px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: vh(22);
}
.v-code .line::after {
display: block;
position: absolute;
content: "";
left: 0;
width: 100%;
bottom: 0;
height: 1px;
background-color: #aaaaaa;
transform: scaleY(0.5);
transform-origin: 0 100%;
}
.v-code .line.animated::before {
display: block;
position: absolute;
left: 50%;
top: 20%;
width: 1px;
height: 60%;
content: "";
background-color: #333333;
animation-name: coruscate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
@keyframes coruscate {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>