theme: channing-cyan

咱先把结构整出来，结构分成两部分，一部分是倒计时开始，一部分是倒计时结束。我们在外层写个div，你也可以传入一个props字符串类型来作为div的class名字，这样可以根据需要，改变你的UI。然后我们引入van-count-down，倒计时组件，它可以绑定一个time时间，然后自定义，取值seconds秒数作为我们的倒计时时间

image.png

<template>
  <div class="send-code">
    <div class="code-btn" v-if="time == 0" @click="sendSmsCode"><span>{{codeText}}</span></div>
    <div class="send-text" v-else>
      <van-count-down :time="time" @finish="finishSend">
        <template #default="timeData">
          <span class="block">{{ timeData.seconds }}S后重新获取</span>
        </template>
      </van-count-down>
    </div>
  </div>
</template>

我们看到，van-count-down上绑定了一个@finish方法，这个方法是组件提供的一个倒计时结束方法。结束时我们把time归零，然后重新进行倒计时；

<script>
  export default {
    name: 'SendCode',
    props:{
      time:{
        type:Number,
        default:0
      },//倒计时时间
    },
    data () {
      return {
        codeText:'获取验证码'
      }
    },
    methods: {
      /**
       * 发送验证码
       */
      sendSmsCode () {
        this.$emit('sendcode',10 * 1000)
      },
      /**
       * 倒计时结束
       */
      finishSend () {
        this.$emit('update:time',0);
        this.codeText = '重新获取'
      },
    }
  }
</script>

父组件中这样使用

<SendCode @sendcode="sendCode" :time="codeTime"></SendCode>
<script>
  import * as API from "@/service/modules/ccrp";
  import SendCode from './components/send-code.vue'//发送验证码组件
  export default {
    components:{
      SendCode,
    },
    data(){
      return {
        codeTime:0,//倒计时时间
        mobile:'',
      }
    },
    methods:{
      //发送验证码
      sendCode(val){
        let reg = /^1[3456789]\d{9}$/;
        let flag = reg.test(this.mobile);
        if(flag){
          this.codeTime = val;
          this.sendCodeRequest();
        }else{
          this.$notify({ type: 'danger', message: '请正确填写手机号码' });
        }
      },
      //发送验证码请求
      sendCodeRequest(){
        API.examsCode({phone:this.mobile}).then(res => {
          if(res.code == 'ok'){
            this.$toast.success('发送成功')
          }else{
            this.codeTime = 0;
            this.$toast.fail(res.msg)
          }
        }).catch(err => {
          
        })
      },
    }
  }
</script>

我们发送验证码之后，通知父组件去进行发送验证码的接口请求，并在成功后归零验证码；一般我们在发送验证码之前，业务上需要先填写手机号，这里就简单给大家写一下，大家可以根据自己的业务需求做校验。到这里，一个简单的发送验证码就写完了。UI大家自己去自由发挥吧，这里就不给大家提供了，觉得有帮助的，点个赞吧，感谢您的阅读与支持