react-words

0.0.4 • Public • Published

react-vcode npm codebeat badge npm

一个简单的React验证码组件

0. 示例图

基本

image

自定义参数

image

1. 安装

npm install react-vcode

2. 使用

import Vcode from 'react-vcode';

 <Vcode />
 

3. 自定义参数

可自行设置覆盖原有值

id                  # string  一个ID 可手动设置也可以不管,默认值:时间戳+随机数 
value               # string  受控,可指定要生成的验证码,而不是随机生成 
length: 4           # number  生成几位验证码 
width: 150          # number  容器宽度 
height: 40          # number  容器高度 
className           # string  自定义样式class, 默认值:无 
onChange            # func    生成新的验证码时触发,将新的验证码字符串返回上级 
style: {            # object  容器样式 (注:如果在style中设置width和height,将覆盖上面通过属性设置的width和height) 
  position: 'relative',
  backgroundColor: '#fff',
  overflow: 'hidden',
  cursor: 'pointer',
  verticalAlign: 'middle',
  userSelect: 'none',
}
options:{           # 自定义参数 
  codes: [          # 所有可能出现的字符 
    'a''b''c''d''e''f''g''h''i''j''k''l''m',
    'o''p''q''r''s''t''x''u''v''y''z''w''n',
    '0''1''2''3''4''5''6''7''8''9',
  ],
  fontSizeMin: 22,  # 字体尺寸最小值 
  fontSizeMax: 26,  # 字体尺寸最大值 
  colors: [         # 字可能的颜色 
    '#117cb3',
    '#f47b06',
    '#202890',
    '#db1821',
    '#b812c2',
  ],
  fonts: [          # 可能的字体 
    'Times New Roman',
    'Georgia',
    'Serif',
    'sans-serif',
    'arial',
    'tahoma',
    'Hiragino Sans GB',
  ],
  lines: 8,         # 生成多少根干扰线 
  lineColors: [     # 线可能的颜色 
    '#7999e1',
    '#383838',
    '#ec856d',
    '#008888',
  ],
  lineHeightMin: 1, # 线的粗细最小值 
  lineHeightMax: 1, # 线的粗细最大值 
  lineWidthMin: 20, # 线的长度最小值 
  lineWidthMax: 60, # 线的长度最大值 
}
 
# 例子: 
 
<Vcode
  id='test'
  length={6}
  onChange={(v) => {console.log('当前的验证码值:', v)}}
  options={{ codes: [ 'A''B''C' ] }}
/>

4. 额外说明

  • 之前用过一个验证码插件叫 vcode.js, 不知道作者。 本react-vcode是通过vcode.js的源码进行修改加工,转成了react组件。感谢原作者。

Readme

Keywords

Package Sidebar

Install

npm i react-words

Weekly Downloads

57

Version

0.0.4

License

MIT

Last publish

Collaborators

  • lx376693576