The whole network the most simple code input box

First on the map

To achieve such a similar input box, but there are a few pages need similar input box (four / payment password input enter the ID), ready to roll up a widget.

Principle #
input string in a string input box, then fill each box according to the subscript index, for readability, I'm here to box with ul, li to write
## subcomponents

<template>
<div>
<label for="code">
<ul class="code-box">
<li class="code-number" v-for="(item, index) in length" :key="index">
{{ code[index] }}
</li>
</ul>
</label>
<input
class="code-input"
v-model="code"
:maxlength="length"
type="number"
id="code"
@keyup.13="next()"
/>
</div>
</template>

<script>
export default {
name: "CodeInput",
props: {
length: {
type: Number,
default: 6
}
},
data() {
return {
code: ""
};
},
methods: {
getCode() {
return this.code;
},
next() {
this.$emit("func", this.code);
}
}
};
</script>
<style scoped>
.code-box {
border-radius: 8px;
border: 1px solid #cccccc;
display: inline-flex;
}
.code-number {
width: 56px;
height: 58px;
border-right: solid #cccccc 1px;
text-align: center;
font-size: 30px;
color: red;
}
.code-number:last-child {
border-right: 0;
}
.code-input {
height: 0.44rem;
position: fixed;
outline: none;
color: transparent;
text-shadow: 0 0 0 transparent;
width: 300%;
margin-left: 100%;
}
button {
width: 100px;
height: 60px;
}
</style>

 

## parent component

<template>
<div>
<security-code v-model="code" v-on:func="show"></security-code>
</div>
</template>
<script>
import securityCode from "../components/password";
export default {
components: { securityCode },
data() {
return {
code: ""
};
},
methods: {
show() {
console.log(this.code);
this.$router.push({ path: "/" });
}
}
};
</script>
<style lang="less" scoped></style>

 

# Attention point
1. label attributes: html label property can click to expand the area under id input of the input.

2. @ keyup.13 = "the Next ()": This refers to a phone keypad Enter / OK Event / forward key trigger

3. The position of the sub-components input: I am absolutely positioned by visual out of my position, can not let him display: none

Additional: Because style general assembly of the father and son are set scoped, if you want to set up a sub-component of the scoped, the elements can be controlled using the '>>>' or 'deep', this own Baidu many ways