React 生成图片验证码组件使用

2023-11-21 05:29•服务端开发•阅读 419

前端开发过程中在与后端对接之前需要自己先造出一些数据，比如：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;