前端实现微信小程序 支付密码输入框

想要达到的效果如下所示：

index.wxml 文件代码

<!-- 输入密码框 -->
<view class="input">
   <view class="input-item" wx:for="{{6}}" wx:key="index" data-index="{{index}}">
     <!-- 实际显示框 -->
     <view class="input-value">{{password[index]}}</view>
     <!-- 光标显示 -->
     <!-- <view class="focus {{index === focusIndex ? 'show': 'hide'}}"></view> -->
   </view>
   <!-- 实际的输入框 -->
   <input class="input-password" maxlength="6" bindinput="setValue" bindblur="inputBlur" type="number" focus="{{focus}}"></input>
 </view>

index.wxss文件代码

/* 密码输入框 */
.input {
  margin-top: 70rpx;
  /* padding: 0 60rpx; */
  position: relative;
}
.input-item {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  /* border-bottom: 2rpx solid #333;*/  /* 下划线效果*/ 
  background: rgba(0, 0, 0, 0.04); /* 灰色框效果 */ 
  border-radius: 4px;
}
.input-item:not(:first-child) {
  margin-left: 8px;
}
.input-value {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28rpx;
}
.input-password {
  position: absolute;
  left: -360rpx;
  top: 0;
  height: 90rpx;
  width: 880rpx;
  /* opacity: 0; */ /* 真机opacity 无效 */ 
  
  /* 解决真机opacity 无效的问题 */ 
  background-color:rgba(255, 255, 255, 0.1); 
  color: rgba(255, 255, 255, 0.1);
}
.focus {
  width: 2rpx;
  height: 50rpx;
  background-color: #333;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.show {
  display: block;
  animation: blink 1s linear infinite;
}
.hide {
  display: none;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }

  50.01%, to {
    opacity: 0;
  }
}

index.js代码

setValue(e) {
 // 设置光标
  var value = e.detail.value
  this.setData({
    value: value,
    focusIndex: value.length,
    focus: value.length < 6,
    password: '*'.repeat(value.length)
  })
  // if (value.length == 6) {
  //   console.log(value, 'sssssssssssssssss')
  // }
},
inputBlur(e) {
  if (e.detail.value.length === 6) {
    this.triggerEvent('complated', {
      value: e.detail.value
    })
  }
},