滑动验证码实现逻辑(开源推荐一款支持pc端)

首发: 趣谈前端

作者: 徐小夕

背景介绍

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

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

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

项目介绍和基本使用

滑动验证码实现逻辑(开源推荐一款支持pc端)(1)

趣谈前端

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

滑动验证码实现逻辑(开源推荐一款支持pc端)(2)

趣谈前端

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

  1. 安装

# or yarn add @alex_xu/react-slider-vertify npm install @alex_xu/react-slider-vertify

  1. 使用

import React from 'react'; import { Vertify } from '@alex_xu/react-slider-vertify'; export default () => { return <Vertify /> };

一个更完整的使用案例:

import React, { useState } from 'react'; import { Vertify } from '@alex_xu/react-slider-vertify'; export default () => { const [visible, setVisible] = useState(false); const show = () => { setVisible(true) } const hide = () => { setVisible(false) } const style = { display: 'inline-block', marginRight: '20px', marginBottom: '20px', width: '100px', padding: '5px 20px', color: '#fff', textAlign: 'center', cursor: 'pointer', background: '#1991FA' } return <> <div onClick={show} style={style}>显示</div> <div onClick={hide} style={style}>隐藏</div> <Vertify width={320} height={160} visible={visible} onSuccess={() => alert('success')} onFail={() => alert('fail')} onRefresh={() => alert('refresh')} /> </> };

大家可以本地测试体验一下.

参与贡献

如果大家对该项目感兴趣也可以在 github 上学习体验, 也可以提 pr 参与项目的贡献.项目地址: https://github.com/MrXujiang/react-slider-vertify

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页