zoukankan      html  css  js  c++  java
  • React 生成图片验证码组件使用

    前端开发过程中在与后端对接之前需要自己先造出一些数据,比如:mock等

    图片验证码同样也需要前端自己先生成。

    使用插件

    react-captcha-code 这是一个基于React(依赖react, react-dom) 和 Canvas 的小插件

    安装
    npm install react-captcha-code --save
    
    属性和方法
    名称 类型 必填 默认值 描述
    height number 40 图片高度
    width number 100 图片宽度
    bgColor string #DFF0D8 背景颜色
    charNum number 4 验证码字符个数
    fontSize number 25 字体大小
    onChange function 点击验证码的回调,初始加载也会调用,返回验证码值
    className string 样式名
    示例
    import React, { useCallback } from 'react';
    import Captcha from 'react-captcha-code';
    
    export default { title: 'Basic' };
    
    export const Basic = () => {
      const handleClick = useCallback((captcha) => {
        console.log('captcha:', captcha);
      }, []);
    
      return <Captcha charNum={4} onChange={handleClick} />;
    };
    
    export default Basic;
    
  • 相关阅读:
    c++链表实现学生成绩管理系统(简易版)
    IOS动画讲解
    栈的实现
    Masonry的使用
    二叉树详解-2
    二叉树详解-1
    CoreData的使用-2
    NSPredicate 详解
    CoreData的使用-1
    IOS常用手势用法
  • 原文地址:https://www.cnblogs.com/xguoz/p/13163867.html
Copyright © 2011-2022 走看看