hs-validate-button

安装

npm i hs-validate-button -D

引入

import HsCaptchaButton from '../packages/captcha-button';

Vue.use(HsCaptchaButton);

使用

<hs-captcha-button></hs-captcha-button>

参数

• tagName(String) 需要渲染的标签名,默认button
• total(Number) 倒计时总时长,默认60，单位秒
• isDisabled(Boolean) 是否可用，默认false

事件

clickHandler(cb) 验证通过后调用cb()

完整使用案例

<template>
  <div id="app">
    <input type="text" v-model="value" />
    <hs-captcha-button class="hs" tagName="button" :total="5" @clickHandler="getValidate"></hs-captcha-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "15736211318"
    };
  },

  methods: {
    getValidate(cb) {
      if (!this.value) {
        alert("请输入手机号码");
        return;
      }

      this.timeout = window.setTimeout(() => {
        alert("短信已发送，请注意查收");
        cb();
      });
    }
  },

  destroyed() {
    window.clearTimeout(this.timeout);
  }
};
</script>