vue3 setup 语法 + ant-vue-design 实现验证码输入框效果

vue3 setup 语法 + ant-vue-design 实现验证码输入框效果 有光标效果
新增一个组件input-code.vue, 然后复制下面全部组件代码就行

效果图如下

组件代码：

// input-code.vue
<template>
  <div>
    <div class="input-code">
      <span class="code" v-for="(item, index) in count" :key="index">
        <span>{
   {
    getReadNum(index) }}</span>
        <span v-if="index === currentIndex && isFocused" class="cursor"></span>
      </span>
      <a-input
        type="password"
        class="input"
        :maxlength="count"
        v-model:value="codeValue"
        @input="updateCursor"
        @keydown="handleKeyDown"
        @focus="isFocused = true"
        @blur="isFocused = false"
        ref="inputRef"
      />
    </div>
  </div>
</template>

<script setup>
  import {
    ref, watch, onMounted } from 'vue';

  const props