1.0.10 • Published 4 years ago

delayed-button v1.0.10

Weekly downloads
1
License
MIT
Repository
-
Last release
4 years ago

delayed-button

功能:将获取短信、邮箱等验证的非业务操作封装,让程序更专注业务,而不是按钮内容和是否可用的控制。组件不提供样式,用户可根据自己引入的框架来进行样式渲染。

应用场景

手机短信、邮箱验证按钮。

安装

npm i delayed-button -D

引入

import DelayedButton from 'delayed-button';

Vue.use(DelayedButton);

使用

<delayed-button
      class="hs"
      :attrs="{maxLength: 11, type: 'primary'}"
      tagName="button"
      :total="5"
      @clickHandler="getValidate"
    ></delayed-button>

参数

  • tagName(String) 需要渲染的标签名,默认button
  • total(Number) 倒计时总时长,默认60,单位秒
  • isDisabled(Boolean) 是否可用,默认false
  • attrs(Object) 标签属性,默认{}。例如{maxLength: 11, type: 'primary'},将添加maxLength=11 type="primary"两个属性

事件

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

完整使用案例

<template>
  <div id="app">
    <input type="text" v-model="value" />
    <delayed-button
      class="hs"
      :attrs="{maxLength: 11, type: 'primary'}"
      tagName="button"
      :total="5"
      @clickHandler="getValidate"
    ></delayed-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>

github

https://github.com/hi-heshuai/delayed-button

1.0.9

4 years ago

1.0.10

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago