推荐!一款支持PC端&移动端的滑动验证组件

开源
之前有一些朋友在群里问如何实现一个滑动验证码插件, 我觉得这个问题非常有意思, 就自己研究和做了一个, 在研究的过程中由于考虑到组件发布的效率问题(npm发布和github仓库发布需要单独进行,有点浪费时间~)。

[[423692]]

背景介绍

之前有一些朋友在群里问如何实现一个滑动验证码插件, 我觉得这个问题非常有意思, 就自己研究和做了一个, 在研究的过程中由于考虑到组件发布的效率问题(npm发布和github仓库发布需要单独进行,有点浪费时间~), 恰好 github 的 action 提供了一套持续集成方案, 可以支持自动化发布, 所以就调研并配置了一套 workflows , 技术栈如下:

  • react hooks + canvas 技术技术选型
  • dumi 为组件开发场景而生的文档工具
  • fatherjs 组件打包工具
  • gihub actions 持续集成方案

目前已经在 github 完全开源, 在文末会附上 github 的地址和文档, 如果恰好你也有类似的需求, 也可以参考该方案的实现方式, 如果你对该项目感兴趣, 也可以随时提 issue 或者参与贡献.

项目介绍和基本使用

图片

上图是一个基本的演示demo, react-slider-vertify 目前提供了很多自定义的属性供用户来配置, 具体属性如下:

接下来和大家介绍一下安装使用方式.

1.安装

  1. or yarn add @alex_xu/react-slider-vertify 
  2. npm install @alex_xu/react-slider-vertify 

2.使用

  1. import React from 'react'
  2. import { Vertify } from '@alex_xu/react-slider-vertify'
  3.  
  4. export default () => { 
  5.     return <Vertify />      
  6. }; 

一个更完整的使用案例:

代码如下:

  1. import React, { useState } from 'react'
  2. import { Vertify } from '@alex_xu/react-slider-vertify'
  3.  
  4. export default () => { 
  5.     const [visible, setVisible] = useState(false); 
  6.     const show = () => { 
  7.         setVisible(true
  8.     } 
  9.     const hide = () => { 
  10.         setVisible(false
  11.     } 
  12.     const style = { 
  13.         display: 'inline-block'
  14.         marginRight: '20px'
  15.         marginBottom: '20px'
  16.         width: '100px',  
  17.         padding: '5px 20px',  
  18.         color: '#fff',  
  19.         textAlign: 'center'
  20.         cursor'pointer'
  21.         background: '#1991FA' 
  22.     } 
  23.     return <> 
  24.         <div onClick={show} style={style}>显示</div> 
  25.         <div onClick={hide} style={style}>隐藏</div> 
  26.         <Vertify  
  27.             width={320} 
  28.             height={160} 
  29.             visible={visible} 
  30.             onSuccess={() => alert('success')}  
  31.             onFail={() => alert('fail')}  
  32.             onRefresh={() => alert('refresh')}  
  33.         /> 
  34.     </>   
  35. }; 

大家可以本地测试体验一下. 置于具体的技术实现, 我后续会专门写一篇文章, 详细介绍滑动验证的实现方案 ~

本文转载自微信公众号「趣谈前端」

 

责任编辑:姜华 来源: 趣谈前端
相关推荐

2023-12-08 08:02:40

开箱React​组件

2013-06-17 10:37:54

产品设计移动设计产品规划

2020-12-21 09:53:52

Redis工具开源

2020-12-03 09:33:58

前端开发工具

2011-07-27 09:54:24

2023-09-26 08:54:24

2021-07-05 07:55:11

PC端移动端设计

2014-05-26 16:52:29

移动前端web组件

2022-05-25 11:24:25

CalendarNutUI移动端

2016-11-09 17:03:36

互联网网络流量移动端

2015-01-09 10:39:08

2022-01-26 12:28:48

移动端弹窗滑动

2009-03-20 12:13:05

Linux米鼠MSN客户端

2021-01-22 09:40:20

恶意软件PC端移动端

2021-01-18 10:11:58

攻击趋势PC端移动端

2019-02-01 09:24:27

开源Web邮件客户端

2021-09-26 16:31:18

滑动验证码开发组件设计

2011-06-25 15:05:48

达内培训移动开发

2013-07-16 10:09:15

2015-08-26 17:31:03

UbuntuBT客户端
点赞
收藏

51CTO技术栈公众号