要实现一个类似于这样的输入框，而且有几个页面都需要类似的输入框（输入身份证后四位/输入支付密码），就准备撸一个小组件。
# 原理
在一个输入框中输入一串字符串，然后根据下标index分别填入框里，为了代码的可读性，我这里框就用ul，li来写
## 子组件
<template> <div> <label for="code"> <ul> <li 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>