微信小程序 验证码输入框 类似支付宝 微信 密码输入框 mpvue写的小程序

效果图如下

css  就三个类  

.code-input-main {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 60rpx;
    width: 550rpx;
  }

  .code-input-main-item {
    /* font-family: time-font-myself; */
    font-family:PingFang-SC-Medium;
    /* width: .34rem;
    height: .44rem; */
    opacity: 0.85;
    /* border-bottom: solid #ffffff 1rpx; */
    /* border: solid #ffffff 1rpx; */
    margin: 0 .05rem;
    text-align: center;
    padding-bottom: 0;
    color: #333333;
    line-height:102rpx;
    width:72rpx;
    height:102rpx;
    background:rgba(255,255,255,1);
    border-radius:10rpx;
  }
.code-input-input {
    height: .44rem;
    position: absolute;
    width: 100%;
    outline: none;
    color: transparent;
    text-shadow: 0 0 0 transparent;
    width: 300%;
    margin-left: -100%;
  }

获取 输入框的值   的事件方法   获取输入框的事件  标签上一定要这么写 

 v-on:input="inputFunc"       v-on:input="xxxxx" 才有效果。用v-mode是不行的。

inputFunc() {
        if (this.code.length == 6) {
           //输入框的值
          console.log(this.code),
          // traceSourceCode: this.sourceCode
           //收起键盘
          wx.hideKeyboard()
          // wx.navigateTo({
          //   url: '/pages/webview/main?boxcode=' + this.sourceCode + "&code=" + this.code
          // });
          wx.redirectTo({
            url: '/pages/webview/main?boxcode=' + this.sourceCode + "&code=" + this.code
          });
        }

      }

这个是用mpvue写的哈  不是微信小程序的官方代码