基于Vant UI 快速实现手机号、验证码表单

html部分:

                <div class="form">
                    <div>
                        <van-field type='number' clickable v-model="phone" clearable label-width='1.3333rem' label="手机号" placeholder="请输入你的联系方式" />
                    </div>
                    <div>
                        <van-field clickable center v-model="code" clearable label-width='1.3333rem' label="验证码" placeholder="请输入你的验证码" />
                        <template #button>
                            <van-button :disabled='isDisabled' size="small" @click="sendCode" type="primary">{{message}}
                            </van-button>
                        </template>
                        </van-field>
                    </div>
                    <div class="btn">
                        <van-button id="noo" size="small" type="primary">提交</van-button>
                    </div>
                </div>

js(Vue)部分:

data:{
    message: '获取验证码',
    phone: '',
    code: '',
    flag: false,
    isDisabled: false
},
methods: {
     sendCode() {
     if (this.flag) return false
     // 自定义验证规则
     // if (this.phone.length !== 11) return  vant.Toast('电话号码长度错误');
     this.flag = true
     let time = 60
     // 短信业务逻辑
     var timer = setInterval(() => {
     if (time > 0) {
         this.isDisabled = true
         time--
         this.message = time + '秒后重试'
     } else {
         clearInterval(timer)
         this.isDisabled = false
         this.flag = false
         this.message = "重新获取验证码"
             }
          }, 1000);
     }
}

style(Vue)部分:

.form {
       padding: .2667rem .5333rem;
       display: flex;
       flex-direction: column;
           >div {
                display: flex;
                align-items: center;
            }
            .van-button--primary {
                background-color: #ff6634;
                border: 1px solid #ff6634;
            }
            .van-button {
                width: 2.1333rem;
            }
            .btn {
                width: 70%;
                padding: .5333rem 0 0;
                margin: 0 auto;
                .van-button {
                    width: 100%;
             }
         }
     }

效果图:

已知bug:
van-field组件不知道什么原因,如果不用div包裹,写两个van-field会被吃为一个,正在排查Bug.