Vue页面--手机获取验证码，判断11位可以点击按钮

<template>
    <div>
        <div class="phone">
          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="请填写手机号"
            maxlength="11"
            class="phone-input"
          />
          <van-button type="info" @click="send()" :disabled="disab" class="phone-btn">获取验证码</van-button>
        </div>
<!--      <div>-->
<!--        <van-field-->
<!--          v-model="verCode"-->
<!--          name="验证码"-->
<!--          label="验证码"-->
<!--          placeholder="请填写验证码"-->
<!--          :rules="[{ required: true, message: '请填写验证码' }]"-->
<!--        />-->
<!--      </div>-->
      <div>
        <van-field
          v-model="verCode"
          name="短信code"
          label="短信code"
          placeholder="请填写短信code"
          :rules="[{ required: true, message: '短信code' }]"
        />
      </div>
      <div>
        <van-field
          v-model="name"
          name="姓名"
          label="姓名"
          placeholder="请填写姓名"
          :rules="[{ required: true, message: '姓名' }]"
        />
      </div>
      <div style="text-align: center" >
        <van-button class="confirm-btn" type="info" @click="confirm()" size="normal">确定</van-button>
      </div>
    </div>
</template>

<script>
    export default {
        name: "userInfo",
        data(){
          return {
            phone:'',
            code:'',
            verCode:'',
            name:'',
            openId:'',
            disab:true
          }
        },
     watch:{
        phone:function (newData,oldData) {
          console.log(newData)
          if(newData.length ==11){
            console.log(1111)
            this.disab = false
          }else{
            this.disab = true
          }
        }
     },
      created() {
        console.log(this.$route.query.num)
        if(!this.$route.query.num){
          this.code = this.getUrlVal('code')
          window.localStorage.setItem('code',this.code)
          this.$http.post('',{
            code:this.code
          }).then((res)=>{
            window.localStorage.setItem('userInfo',JSON.stringify(res.data.pageUser))
            window.localStorage.setItem('openId',res.data.pageUser.openid)
            this.openId = res.data.pageUser.openid
            if(res.data.pageUser.phone){
              window.localStorage.setItem('phone',res.data.pageUser.phone)
              this.$router.push('/')
            }else{
              console.log('654321')
            }
          }).catch((err)=>{
            console.log(err)
          })
        }else{
          this.openId = window.localStorage.getItem('openId')
          console.log(this.openId)
        }

      },
      mounted() {
       
      },
      methods:{
        formatter(value){
          console.log(value)
          if(value.length==11){
            this.disab = false
          }
        },
        jump(){
          this.$router.push('/home')
        },
        getUrlVal(key) {
          // 获取参数
          var url = window.location.search;
          // 正则筛选地址栏
          var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
          // 匹配目标参数
          var result = url.substr(1).match(reg);
          //返回参数值
          return result ? decodeURIComponent(result[2]) : null;
        },
        send(){
          this.$http.post('',{
            openid:this.openId,
            phone:this.phone
          }).then((res)=>{
            console.log(res)
          }).catch((err)=>{
            console.log(err)
          })
        },
        confirm(){
          this.$http.post('',{
            openid:this.openId,
            phone:this.phone,
            verCode:this.verCode,
            userName:this.name
          }).then((res)=>{
            console.log(res)
            if(res.data.code==0){
              window.localStorage.setItem('phone',res.data.code)
              this.$router.push('/')
            }else{
              console.log('错误')
            }
          }).catch((err)=>{
            console.log(err)
          })
        }
      }
    }
</script>

<style scoped>
  .phone {
    position: relative;
    width: 100%;
    height: 44px;
  }

  .phone-input {
    position: absolute;
    left: 0;
    width: 70%;
  }

  .phone-btn {
    position: absolute;
    right: 0;
    width: 30%;
    z-index: 99;
    background-color: #969799;
    border: 1px solid #969799;
  }

  .confirm-btn {
    width: 50%;
    margin-top: 20px;
    border-radius: 10px;
  }

</style>