vue 实现6位验证码输入功能

实现获取验证码后,输入数字,依次填写到input框中.如图所示:

<div class="input-box code font-Toyota-Semibold">
    <div class="input-content d-flex" @keydown="keydown" @keyup="keyup" @paste="paste" @mousewheel="mousewheel" @input="inputEvent">
        <input class="code-text" max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="input[0]" type="number" ref="firstinput" />
        <input class="code-text" max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="input[1]" type="number" />
        <input class="code-text" max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="input[2]" type="number" />
        <input class="code-text" max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="input[3]" type="number" />
        <input class="code-text" max="9" min="0" maxlength="1" data-index="4" v-model.trim.number="input[4]" type="number" />
        <input class="code-text" max="9" min="0" maxlength="1" data-index="5" v-model.trim.number="input[5]" type="number" />
    </div>
</div>

data() {
   
    return {
   
        pasteResult: [],
    }
},
computed: {
   
    input() {
   
        return this.pasteResult.length === 6 ? this