vue 发送验证码倒计时公共组件

前言

基本上做的每个项目都会有发送验证码的需求，之前一直是遇到一次写一次方法，这次做这个需求的时候正好把这个功能封装为组件，以方便后期使用。

$这里需要注意的是：$

1，了解vue–props属性的都知道，我在props传参数的时候默认值是在你什么参数都没有传入的时候生效
2，所以这个时候需要全部都从父组件传入，也是比较灵活的做法
3，如果真的需要使用灵活的使用默认值，那就在公共得组件内使用computed计算属性,这样就可以使用默认值了，也就是下面computed的部分，但是注意页面中使用也要使用computed返回的值，不要写错
4，这里就是一个公共得button发送验证码，自己根据不同的需求写发送验证码的方法，比较灵活

这个组件将所有的参数都开放出来，达到了更加灵活的需求，适合多个场景。

这里用的vue-cli + element-ui写的，不过方法是可以用到每个框架的。

step 一，创建公共得vue组件

<!--
 * @Author: 郝峰
 * @Description: 公共得灵活的发送验证码界面，使用的是vue+element-ui
 * @FilePath: \src\components\Buttoncountdown\index.vue
-->


<template>
  <el-button
    :type="public_button_params.button_type"
    :disabled="send_code_button"
    @click="public_button"
    >{{ public_button_params.button_text }}</el-button
  >
</template>

<script>
export default {
  props: {
    public_button_params: {
      type: Object,
      default: function () {
        return {
          button_type: "primary", //button is type
          button_text: "发送验证码", //这是按钮展示文字，因为后期会变为秒数，所以需要button_prepare_text
          button_prepare_text: "发送验证码", //在变为倒计时之后需要再变回原来的文字
          send_timer_coundown: 60, //倒计时
        };
      },
    },
  },
  data() {
    return {
      send_timer: null,
      send_count_down: "",
      send_code_button: false,
    };
  },
  methods: {
    public_button() {
      const TIME_COUNT = this.public_button_params.send_timer_coundown;
      if (!this.send_timer) {
      this.send_code_interface();
        this.send_count_down = TIME_COUNT;
        this.public_button_params.button_text = this.send_count_down + "s" + "后重新发送";
        this.send_timer = setInterval(() => {
          if (this.send_count_down > 0 && this.send_count_down <= TIME_COUNT) {
            this.send_count_down--;
            this.public_button_params.button_text = this.send_count_down + "s" + "后重新发送";
            this.send_code_button = true;
          } else {
            this.public_button_params.button_text = this.public_button_params.button_prepare_text;
            clearInterval(this.send_timer);
            this.send_timer = null;
            this.send_code_button = false;
          }
        }, 1000);
      }
    },
    send_code_interface() {
      this.$emit('interfance_code_send');     //向外分发一个方法，在组件外部发起发送验证码的接口
    },
  },
};
</script>

<style lang='scss' scoped>
</style>

step 二，在需要使用的页面

<template>
            <publicButtonCode
              :public_button_params="send_code_params"
              @interfance_code_send="interfance_children_send"
            ></publicButtonCode>
</template>
<script>
   import publicButtonCode from "@/components/Buttoncountdown"
export default {
  components: { publicButtonCode },
  data() {
    return {
//这里的参数对比子组件内的注释
    send_code_params: {
        button_type: "success",
        button_text: "发送验证码",
        button_prepare_text: "发送验证码",
        send_timer_coundown: 60,
      },
    };
  },
methods:{
             // 点击发送验证码   这里只是一个演示，就是你在接口中做你的发送验证码获取uuid之类操作
    interfance_children_send() {
      console.log("2222222");
      // this.difference_bind = 1  绑定提现账号   2  解绑提现账号  3  申请提现
      // 提现发起AGENT_BALANCE_WITHDRAW
      // 提现账号绑定AGENT_CASH_ACCOUNT_BINDING
      // 提现账号解绑AGENT_CASH_ACCOUNT_UNBINDING
      let params_reference = {
        smsBusinessTypeEnum:
          this.difference_bind == 1
            ? "AGENT_CASH_ACCOUNT_BINDING"
            : this.difference_bind == 2
            ? "AGENT_CASH_ACCOUNT_UNBINDING"
            : "AGENT_BALANCE_WITHDRAW",
      };
      smsSendCode(params_reference)
        .then((response) => {
          console.log(response);
          this.$message({
            message: "验证码发送成功",
            type: "success",
            center: true,
            duration: "2000",
          });
          this.Get_data_after_sending_captcha = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    }
}
</script>

结束语

这个组件最大的好处就是比较灵活，传入所有的参数，就可以直接使用了。还有不足的会多多改进。