antd按钮倒计时的实现

已于 2022-03-01 14:59:58 修改
阅读量2.1k 收藏
点赞数
分类专栏： antd 文章标签： typescript
于 2021-08-07 18:15:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45869418/article/details/119490130
版权

0.在本类中的state创建所需要的变量，当倒计时方法出发的时候通过改变state的值，页面可以动态显示倒计时。

class SecurityView extends PureComponent {
  state = {
    loading: false,
    countDown: 60,
    count: undefined,
  };
  // ......
}

1.绑定model层的方法(在此之前将model层和service层的接口写好)，定义倒计时方法

@connect(({ user,loading }) => ({
  currentUser: user.currentUser,
  loading: loading.models.user,
  captchaing: loading.effects['login/getCaptcha'],
}))
class SecurityView extends PureComponent {
  state = {
    loading: false,
    countDown: 60,
    count: undefined,
  };
  // 倒计时方法
  runGetCaptchaCountDown = () => {
    const { countDown } = this.state;
    let count = countDown || 59;
    this.setState({ count });
    this.interval = setInterval(() => {
      count -= 1;
      this.setState({ count });
      if (count === 0) {
        clearInterval(this.interval);
      }
    }, 1000);
  };
  // ......
}

2.在验证码点击按钮上绑定点击事件

@connect(({ user,loading }) => ({
  currentUser: user.currentUser,
  loading: loading.models.user,
  captchaing: loading.effects['login/getCaptcha'],
}))
class SecurityView extends PureComponent {
  state = {
    loading: false,
    countDown: 60,
    count: undefined,
  };

  onCaptcha = () => {
      new Promise((resolve, reject) => {
        var captchaAppId = '2060950660';
        var captcha1 = new TencentCaptcha(captchaAppId, res => {
          if (res.ret == 0) {
            const { dispatch} = this.props;
            dispatch({
              type: 'login/getCaptcha',
              payload: {
                  scene: 'smsresetpwd',
                  tel: getAccountInfo().tel,
                  res: res,
              }
            })
            .then(this.runGetCaptchaCountDown)
            .catch(reject);
            } else {
              message.error('获取验证码失败');
            }
          }
        );
        // 进行行为认证（即显示验证图片）
        captcha1.show();
      });
    }

  // 倒计时方法
  runGetCaptchaCountDown = () => {
    const { countDown } = this.state;
    let count = countDown || 59;
    this.setState({ count });
    this.interval = setInterval(() => {
      count -= 1;
      this.setState({ count });
      if (count === 0) {
        clearInterval(this.interval);
      }
    }, 1000);
  };
  // ......
  render(){
  	const { loading } = this.state;
  	const { getFieldDecorator } = this.props.form;

  	return{
  		<Form>
			<FormItem
			  lable = '用户名'
			>
			{getFieldDecoator('tel',{
			  initialValue : '13600001314',
			  rules: [
				required: true,
				message: '请输入手机号',
			  ],
			})(
			  <Input style={{width: 300}} placeholder='请输入用户名'>
			<FormItem>
			<FormItem
			  lable='验证码'
			>
			  {getFieldDecorator('captcha',{
                rules:[
                  {
                    required: true,
                  	message: '请输入验证码!',
                  }
                ]
              })(
                <Input style={{ width: 190 }} placeholder="请输入验证码" autoComplete="false" />
              )}
              	<Button 
              	  type="primary" 
              	  style={{marginLeft: 10,width: 102}} 
              	  onClick={this.onCaptcha} 
              	  loading={laoding}
                  disabled={
                    undefined != this.state.count && 0 != this.state.count 
                  }
                >
                  {undefined == this.state.count || 0 == this.state.count ? '获取验证码' : this.state.count+'秒'}
                </Button>
			  </FormItem>
			  <FormItem {...tailFormItemLayout}>
                <Button type="primary" loading={this.state.byTelLoading} onClick={telValidate} htmlType="submit">修改</Button>
            </FormItem>
		  </Form>
	  }
	}
  }

附录(在项目中该页面的完整代码)：

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Form, Input, Modal, Button, message, List, Tabs } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '@/pages/Setting/PwdSetting.less';
import { formatMessage } from 'umi/locale';
import { getAccountInfo } from '@/utils/authority'
import { MD5Pwd } from '@/utils/utils'
import user from '@/models/user';
const FormItem = Form.Item;
const confirm = Modal.confirm;
const { TabPane } = Tabs;

@connect(({ login, user,loading }) => ({
  login,
  currentUser: user.currentUser,
  loading: loading.models.user,
  captchaing: loading.effects['login/getCaptcha'],
}))
class SecurityView extends PureComponent {
  state = {
    confirmDirty: false,
    loading: false,
    visible: false,
    confirmLoading: false,
    countDown: 60,
    count: undefined,
    byTelLoading: false,
    tabKey: 1,
  };

  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/refresh',
      callback: response => {
        if (response.code == 200) {
          setAccountInfo(response.data);
          this.setState({
            accountInfo: response.data
          })
          this.setBaseInfo();
        } else {
          message.warn(response.message);
        }
      }
    })
  }

  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('newPassword')) {
      callback('两次输入的密码不一致!');
    } else {
      callback();
    }
  }

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }

  showModal = () => {
    this.setState({
        visible: true,
    });
  };

  handleCancel = () => {
    this.setState({
        visible: false,
    });
  };

  getData = () => [
    {
      title: '账户密码',
      description: (
        <Fragment>
          { getAccountInfo().hasPassword==1?'已设定密码':'未设定密码'}
          {/* {formatMessage({ id: 'app.settings.security.password-description' })}： */}
        </Fragment>
      ),
      actions: [
        <a onClick={this.showModal}>
          修改
        </a>,
      ],
    }];

    // 获取验证码
    onCaptcha = () => {
      new Promise((resolve, reject) => {
        var captchaAppId = '2060950660';
        var captcha1 = new TencentCaptcha(captchaAppId, res => {
          if (res.ret == 0) {
            const { dispatch} = this.props;
            dispatch({
              type: 'login/getCaptcha',
              payload: {
                  scene: 'smsresetpwd',
                  tel: getAccountInfo().tel,
                  res: res,
              }
            })
            .then(this.runGetCaptchaCountDown)
            .catch(reject);
            } else {
              message.error('获取验证码失败');
            }
          }
        );
        // 进行行为认证（即显示验证图片）
        captcha1.show();
      });
    }

    runGetCaptchaCountDown = () => {
      const { countDown } = this.state;
      let count = countDown || 59;
      this.setState({ count });
      this.interval = setInterval(() => {
        count -= 1;
        this.setState({ count });
        if (count === 0) {
          clearInterval(this.interval);
        }
      }, 1000);
    };

  render() {
    const { dispatch, currentUser } = this.props;
    const userInfo=getAccountInfo();
    const that = this;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    const validate = () => {
      const { form } = this.props
      form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.accountId=userInfo.accountId;
          confirm({
            title: '确认修改密码吗?',
            okText: '确认',
            cancelText: '取消',
            onOk() {
              that.setState({
                loading: true
              })
              values.newPassword = MD5Pwd(values.newPassword);
              values.oldPassword = MD5Pwd(values.oldPassword);
              dispatch({
                type: 'user/modifyPwd',
                payload: { ...values },
                callback: result => {
                  if (result.status == 'success') {
                    message.success(result.message);
                    form.resetFields();
                    that.setState({
                      visible: false,
                    });
                  } else {
                    message.error(result.data&&result.data[0]?result.message+","+result.data[0]:result.message);
                  }
                  that.setState({
                    loading: false
                  })
                },
              });
            },
            onCancel() { }
            
          })
        }
      });
    };

    const telValidate = () => {
      const { form } = this.props
      form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.accountId=userInfo.accountId;
          confirm({
            title: '确认修改密码吗?',
            okText: '确认',
            cancelText: '取消',
            onOk() {
              that.setState({
                byTelLoading: true
              })
              values.newPassword = MD5Pwd(values.newPassword);
              dispatch({
                type: 'user/passwordRestByRel',
                payload: { ...values },
                callback: result => {
                  if (result.status == 'success') {
                    message.success(result.message);
                    form.resetFields();
                    that.setState({
                      visible: false,
                    });
                  } else {
                    message.error(result.data&&result.data[0]?result.message+","+result.data[0]:result.message);
                  }
                  that.setState({
                    byTelLoading: false
                  })
                },
              });
            },
            onCancel() { }
            
          })
        }
      });
    };

   const getAccountPwdUpdateForm = (key) => {
      
      if (key == 1) {
        return  (<Form >
          <FormItem
            {...formItemLayout}
            label='用户名'
          >
            {getFieldDecorator('userName', {
              rules: [{
                required: true,
                message: '请输入用户名!',
              }],
              initialValue: userInfo ? userInfo.username : undefined,
            })(
              <Input style={{ width: 300 }} placeholder='请输入用户名' disabled />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label='原密码'
          >
            {getFieldDecorator('oldPassword', {
              rules: [{
                required: true,
                message: '请输入原密码!',
              }],

            })(
              <Input.Password style={{ width: 300 }} placeholder='请输入原密码' />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label='新密码'
          >
            {getFieldDecorator('newPassword', {
              rules: [{
                required: true,
                message: '请输入新密码!',
              }, {
                pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,20}$/,
                message: '密码格式错误！',
              },{
                validator: this.validateToNextPassword,
              }],

            })(
              <Input.Password style={{ width: 300 }} placeholder='请输入新密码' autoComplete="false" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label='确认密码'
          >
            {getFieldDecorator('confirm', {
              rules: [{
                required: true,
                message: '请确认密码!',
              }, {
                validator: this.compareToFirstPassword,
              }],
            })(
              <Input.Password style={{ width: 300 }} onBlur={this.handleConfirmBlur} placeholder='请确认密码' />
            )}
          </FormItem>
          <FormItem >
            {getFieldDecorator('accountId', { initialValue: currentUser ? currentUser.accountId : undefined })(
              <Input style={{ width: 300 }} type="hidden" />
            )}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" loading={this.state.loading} onClick={validate} htmlType="submit">修改</Button>
          </FormItem>
        </Form>)
      } else {
        return (
          <Form>
            <FormItem
              {...formItemLayout}
              label='手机号'
            >
              {getFieldDecorator('tel', {
                initialValue: userInfo ? userInfo.tel : undefined,
                rules:[
                  {
                    required: true,
                    message: '请输入手机号!',
                  }
                ],
              })(
                <Input style={{ width: 300 }} placeholder='请输入手机号' disabled />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label='验证码'
            >
              {getFieldDecorator('captcha',{
                rules:[
                  {
                    required: true,
                  message: '请输入验证码!',
                  }
                ]
              })(
                <Input style={{ width: 190 }} placeholder="请输入验证码" autoComplete="false" />
              )}
              <Button type="primary" style={{marginLeft: 10,width: 102}} onClick={this.onCaptcha} loading={captchaing}
                disabled={undefined != this.state.count && 0 != this.state.count }
              >
                {undefined == this.state.count || 0 == this.state.count ? '获取验证码' : this.state.count+'秒'}
              </Button>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label='新密码'
            >
              {getFieldDecorator('newPassword', {
                rules: [{
                  required: true,
                  message: '请输入新密码!',
                }, {
                  pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,20}$/,
                  message: '密码格式错误！',
                },{
                  validator: this.validateToNextPassword,
                }],

              })(
                <Input.Password style={{ width: 300 }} placeholder='请输入新密码' autoComplete="false" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label='确认密码'
            >
              {getFieldDecorator('confirm', {
                rules: [{
                  required: true,
                  message: '请确认密码!',
                }, {
                  validator: this.compareToFirstPassword,
                }],
              })(
                <Input.Password style={{ width: 300 }} onBlur={this.handleConfirmBlur} placeholder='请确认密码' />
              )}
            </FormItem>
            <FormItem >
              {getFieldDecorator('accountId', { initialValue: currentUser ? currentUser.accountId : undefined })(
                <Input style={{ width: 300 }} type="hidden" />
              )}
            </FormItem>
            <FormItem {...tailFormItemLayout}>
              <Button type="primary" loading={this.state.byTelLoading} onClick={telValidate} htmlType="submit">修改</Button>
            </FormItem>
          </Form>
        )
      }
    }

    const handleChangeTabs = (key) => {
        this.setState({
          tabKey: key
        })
    }

    const { visible, confirmLoading, tabKey} = this.state;
    const { captchaing } = this.props;

    return (
      <Fragment>
        <List
          itemLayout="horizontal"
          dataSource={this.getData()}
          renderItem={item => (
            <List.Item actions={item.actions}>
              <List.Item.Meta title={item.title} description={item.description} />
            </List.Item>
          )}
        />
        <Modal
            title='修改原密码'
            visible={visible}
            // onOk={this.handleOk}
            footer ={
              null
              // 如果把"null"换成"[]"，则modal会显示空的footer(有一条分界线且部分的空白的)
            }
            confirmLoading={confirmLoading}
            onCancel={this.handleCancel}
        >
          <div className={styles.main} >
            <Tabs defaultActiveKey="1"  onChange={handleChangeTabs}  >
              <TabPane tab="账号密码修改" key="1">
              { tabKey==1?getAccountPwdUpdateForm(1):"" }
              </TabPane>
              { null==userInfo.tel||userInfo.tel==''?"":( <TabPane tab="手机号修改密码" key="2" >
                { tabKey==2?getAccountPwdUpdateForm(2):"" }
              </TabPane>) 
              }
            </Tabs>
          </div>
        </Modal>
      </Fragment>
    );
  }
}

export default Form.create()(SecurityView);
Ant Design Vue 框架下倒计时功能的实现
weixin_45409579的博客
08-30 2237
antd框架下一小时倒计时功能的实现。 后端查询出倒计时时间的差值后，穿到前台。 直接上vue代码 <span slot="action" slot-scope="text, record"> <p v-if="record.djstime2 > 0">{{time(record.djstime2)}}</p> <p v-else>已超时</p> </spa
【踩坑】react函数组件实现手机验证码倒计时
最新发布
weixin_45887187的博客
06-24 680
react函数组件+ts项目中，使用setInterval实现倒计时效果，发现数据没有正确递减的问题（闭包导致）
countdown-button：依赖于Ant Design的倒计时按钮
02-10
倒数按钮 依赖于Ant Design的倒计时按钮封装 :package: 在Ant Design的<Button>组件基础上仅增加倒计时功能，定制性高的同时也无侵入 安装 yarn add countdown-button 使用方式
react antd 自定义倒计时按钮组件
一只程序媛
03-04 1122
父组件： import React, { useState, useEffect, useRef } from 'react'; import {Button} from 'antd'; // 控制按钮执行倒计时事件 const [toStart, settoStart] = useState(false); //组件使用 <Timebutton name={'命中详情'} num={4} onClick={() => { console.log('3333');
带有倒计时功能的button
请叫我孙长老的博客
07-13 631
/**  * 带有定时功能的button 用于获取验证码等具有定时操作  * Created by Home-Pc on 2017/5/31.  */ @SuppressLint("AppCompatCustomView") public class CustomGetCodeWidgets extends Button {     public CustomGetCo
【antd】倒计时组件
idwtwt的专栏
11-28 6917
在antd pro自带倒计时组件： import React, { Component } from 'react'; function fixedZero(val) { return val * 1 &lt; 10 ? `0${val}` : val; } const initTime = props =&gt; { let lastTime = 0; let targetTi...
基于Ant Design实现的React倒计时按钮组件
我们首先讨论了React框架的核心概念，其次介绍了Ant Design组件库的设计理念和应用，接着讲述了TypeScript语言的优势及其在项目中的应用，然后探讨了倒计时按钮封装的实现及其重要性，最后对软件包管理工具yarn的...
React--Hooks实现验证码倒计时
qq_60976312的博客
09-23 773
React--Hooks实现验证码倒计时
倒计时button(借鉴CountDownButton)
徐影魔的博客
05-02 627
看了简书上的一片关于CountDownButton的文章：Hyena-CountDownButton-倒计时按钮 用了里面的思路自己写了下。 主要代码public class CountDownButton extends Button { private String text; private String content; public CountDownButton(
react 手写优化实现 antd 倒计时功能组件（ 附源码）
Baron的技术blog
12-20 1090
react 手写优化antd 倒计时功能组件
CountdownTimer：使用React Hooks的简单倒数计时器
03-01
CountdownTimer：使用React Hooks的简单倒数计时器
React倒计时功能实现代码——解耦通用
10-14
主要介绍了React倒计时功能实现——解耦通用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-27 工作记录--React-使用antd-mobile实现圆弧倒计时
weixin_48850734的博客
12-27 607
React-使用antd-mobile实现圆弧倒计时
CountDownTimer倒计时
weixin_43654610的博客
05-29 269
效果图： 布局：activity_main <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto...
用antd实现番茄钟
sinat_23377479的博客
07-15 434
前端实现番茄钟功能
自制倒计时插件
马优晨
05-09 2091
这里分享一个自己写的倒计时插件，这里使用了VUE来封装组件，下面是具体的代码：/* * Created by mayouchen on 2017/4/13 * youchen.ma@weimob.com */整个文件采用了CMD的思想，并且引入了zepto，与Vue来开发。define(function (require, exports, module) { var $ = r
实现秒表功能 : 显示时,分,秒 , 点击按钮开始计时
Endeavor_No1的博客
08-30 6194
practice3 实现秒表功能 : 显示时,分,秒 , 点击按钮开始计时 00时 00分 00秒 开始 暂停 重新计数 var time; var hour = document.getElementById("hour"); var minute = document.getElementById("minute");
使用ant-design-vue的button组件实现计数器
richest_qi的博客
06-16 1180
新建项目 本例使用的是vue3。 vue create demo Counter组件 // Counter.vue <template> <div>{{count}}</div> <a-button type="primary" @click="add" class="btn">加</a-button> <a-button type="primary" @click="sub" class="btn">.
ant 倒计时 发送验证码倒计时
Sengoku_Xingzi的博客
10-10 1424
我用的是vue3 setup 语法糖 夹杂点ts一开始是刷新了一下首先先引入html 代码Button 标签 1.点击后 方法2 禁用 效果是按需引入 不懂的看之前文章v-if 这个判断 为true 也就是 botton禁用后就出现:value 是 倒计时的数@finish 倒计时结束后触发format 可以是 “D 天 H 时 m 分 s 秒” 也可以是 “HH:mm:ss:SSS”
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值