<template>
<div>
<div class="code-input-main">
<div class="code-input-main-item">{{getCode[0]}}</div>
<div class="code-input-main-item">{{getCode[1]}}</div>
<div class="code-input-main-item">{{getCode[2]}}</div>
<div class="code-input-main-item">{{getCode[3]}}</div>
<div class="code-input-main-item">{{getCode[4]}}</div>
<div class="code-input-main-item">{{getCode[5]}}</div>
<input class="code-input-input" v-model="code" maxlength="6" type="number" />
</div>
<div @click="submit" >提交</div>
</div>
</template>
<script>
export default {
name: "CodeInput",
data() {
return {
code: '',
passwordLength: 6
}
},
computed: {
getCode() {
return this.code;
}
},
methods: {
submit() {
console.log(this.code.substring(0, 6));
}
}
}
</script>
<style scoped>
.code-input-input {
height: 49px;
position: absolute;
width: 100%;
outline: none;
background: transparent;
color: transparent;
border: none;
text-shadow: 0 0 0 transparent;
width: 300%;
margin-left: -100%;
}
.code-input-main {
background: red;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.code-input-main-item {
font-family: time-font-myself;
width: 16px;
height: 40px;
opacity: 0.8;
border-bottom: solid blue 1px;
margin: 5px;
text-align: center;
padding-bottom: 0;
font-size: 30px;
color: green;
}
.code-input-input {
height: 44px;
position: absolute;
outline: none;
color: transparent;
text-shadow: 0 0 0 transparent;
width: 300%;
margin-left: -100%;
}
</style>
</style>
六位验证码实现
最新推荐文章于 2024-01-16 12:16:39 发布