vue+vant登录页面demo

<img src="../assets/logo.png" alt="">

    <van-form @submit="onSubmit">

      <van-field v-model="mobile"

                 name="手机号"

                 label="手机号"

                 placeholder="手机号"

                 :rules="rules.mobile" />

      <van-field v-model="code"

                 name="验证码"

                 label="验证码"

                 placeholder="验证码"

                 :rules="rules.code">

        <template #button>

          <van-count-down :time="1000 * 60"

                          format="ss s"

                          @finish="isSendCode= false"

                          v-if="isSendCode" />

          <van-button v-else

                      @click="onSendSms"

                      round

                      size="small"

                      type="default">发送验证码</van-button>

        </template>

      </van-field>

      <div style="margin: 16px;">

        <van-button round

                    block

                    type="info"

                    native-type="submit">

          登录

        </van-button>

      </div>

    </van-form>

<script>

// @ is an alias to /src

export default {

  data () {

    return {

      mobile: '',

      code: '',

      rules: {

        mobile: [{

          required: true,

          message: '手机号不能为空'

        }, {

          pattern: /^1[3|5|7|8]\d{9}$/,

          message: '手机号格式错误'

        }],

        code: [{

          required: true,

          message: '验证码不能为空'

        }, {

          pattern: /^\d{6}$/,

          message: '验证码格式错误'

        }]

      },

      isSendCode: false

    }

  },

  methods: {

    onSubmit (values) {

      if (this.code === '123456') {

        this.$toast('登录成功')

        this.$router.push('/index')

      } else {

        this.$toast('手机号或验证码错误')

      }

    },

    onSendSms () {

      this.isSendCode= !this.isSendCode

    }

  }

}

</script>