uniapp项目写一个输入手机号、验证码的uni-ui

可以使用uni-ui中的两个组件分别实现输入手机号和验证码的功能。

1. 输入手机号

使用uni-ui中的uni-input组件，设置type为number，maxlength为11，可以限制用户只能输入数字，并且手机号码最长为11位。

<uni-input type="number" maxlength="11" placeholder="请输入手机号"></uni-input>

2. 输入验证码

使用uni-ui中的uni-countdown和uni-input组件，uni-countdown用于倒计时，uni-input用于输入验证码。

<uni-countdown :second="60" @change="countdownChange"></uni-countdown>
<uni-input type="number" maxlength="6" placeholder="请输入验证码" @input="inputChange"></uni-input>

其中，@change监听uni-countdown的变化事件，@input监听uni-input的输入事件。

在Vue的methods中，需要定义countdownChange和inputChange两个方法。

methods: {
  countdownChange(e) {
    // 倒计时变化事件
    console.log(e.detail)
  },
  inputChange(e) {
    // 输入验证码事件
    console.log(e.detail)
  }
}

完整代码如下：

<template>
  <view class="content">
    <uni-input type="number" maxlength="11" placeholder="请输入手机号"></uni-input>
    <uni-countdown :second="60" @change="countdownChange"></uni-countdown>
    <uni-input type="number" maxlength="6" placeholder="请输入验证码" @input="inputChange"></uni-input>
  </view>
</template>

<script>
  export default {
    methods: {
      countdownChange(e) {
        // 倒计时变化事件
        console.log(e.detail)
      },
      inputChange(e) {
        // 输入验证码事件
        console.log(e.detail)
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
</style>