vue3实现密码输入框效果的示例代码

          <div class="footerTextStyle">请输入6位数支付密码</div>
          <div class="input-box">
            <div class="code-item" :class="codeValue?.length == 0 && inputFocus ? 'code-item-active' : ''">{{ codeValue[0]
            }}
            </div>
            <div class="code-item" :class="codeValue?.length == 1 && inputFocus ? 'code-item-active' : ''">{{ codeValue[1]
            }}
            </div>
            <div class="code-item" :class="codeValue?.length == 2 && inputFocus ? 'code-item-active' : ''">{{ codeValue[2]
            }}
            </div>
            <div class="code-item" :class="codeValue?.length == 3 && inputFocus ? 'code-item-active' : ''">{{ codeValue[3]
            }}
            </div>
            <div class="code-item" :class="codeValue?.length == 4 && inputFocus ? 'code-item-active' : ''">{{ codeValue[4]
            }}
            </div>
            <div class="code-item code-item-last" :class="codeValue?.length >= 5 && inputFocus ? 'code-item-active' : ''">{{ codeValue[5]
            }}
            </div>
            <a-input class="input-code" v-model:value="codeValue" type="" @blur="codeInputBlur"
              @focus="codeInputFocus" @input="codeInputChange" maxlength="6" />
          </div>

// 输入的6位密码
const codeValue = ref([])
const inputFocus = ref(false)
// 密码输入框
const codeInputChange = (e : any) => {
  console.log('喵喵喵：', e.data);
  if (e) {
    // // 判断输入内容是否为数字
    // if ((/^\+?[0-9][0-9]*$/).test(e)) {
    //   codeValue.value = e.data
    // }
    Array.from(codeValue.value).push(e.data)
  } else {
    codeValue.value = []
  }
  console.log('咩咩：', codeValue.value);
}
// 密码输入框失去焦点
const codeInputBlur = () => {
  inputFocus.value = false
}
// 密码输入框获取到焦点
const codeInputFocus = () => {
  inputFocus.value = true
}

<style lang="scss" scoped>
// 密码输入框
.input-box {
  position: relative;
  margin: 4px 0px 20px 0px;
  display: flex;
  width: 290px;
  height: 48px;
  background-color: transparent;
  border: none;
  color: transparent;
}
// 透明input
.input-code {
  position: absolute;
  width: 290px;
  height: 48px;
  background-color: transparent;
  border: none;
  letter-spacing: 40px;
  padding: 0px 20px;
}
.code-item {
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  border: 1px solid rgba(51,51,51,0.20);
  border-right: none;
  border-radius: 5px;
}
.code-item-last{
  border-right: 1px solid rgba(51,51,51,0.20);
}
.code-item-active {
  border: 1px solid #F23026;
  box-sizing: border-box;
}
</style>