推荐!一款支持pc端&移动端的滑动验证组件
趣谈前端
共 3729字,需浏览 8分钟
·
2021-09-16 15:28
关注并将「趣谈前端」设为星标
每天定时分享技术干货/优秀开源/技术思维
背景介绍
之前有一些朋友在群里问如何实现一个滑动验证码插件, 我觉得这个问题非常有意思, 就自己研究和做了一个, 在研究的过程中由于考虑到组件发布的效率问题(npm发布和github仓库发布需要单独进行,有点浪费时间~), 恰好 github
的 action
提供了一套持续集成方案, 可以支持自动化发布, 所以就调研并配置了一套 workflows
, 技术栈如下:
react hooks + canvas 技术技术选型 dumi 为组件开发场景而生的文档工具 fatherjs 组件打包工具 gihub actions 持续集成方案
目前已经在 github
完全开源, 在文末会附上 github
的地址和文档, 如果恰好你也有类似的需求, 也可以参考该方案的实现方式, 如果你对该项目感兴趣, 也可以随时提 issue
或者参与贡献.
项目介绍和基本使用
![](https://filescdn.proginn.com/594edb6a15654fb8e98994028acaebad/4bd1efa0ea24bc7c327b191b2992d9c5.webp)
上图是一个基本的演示demo
, react-slider-vertify 目前提供了很多自定义的属性供用户来配置, 具体属性如下:
![](https://filescdn.proginn.com/b59471079b9b3cb25f0afb753776d7c4/7f721253ef1102f766ee6f83bb491d70.webp)
接下来和大家介绍一下安装使用方式.
安装
# or yarn add @alex_xu/react-slider-vertify
npm install @alex_xu/react-slider-vertify
使用
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')}
/>
</>
};
大家可以本地测试体验一下. 置于具体的技术实现, 我后续会专门写一篇文章, 详细介绍滑动验证的实现方案, 欢迎大家 star ~
参与贡献
如果大家对该项目感兴趣也可以在 github
上学习体验, 也可以提 pr
参与项目的贡献.项目地址可以扫描下方二维码体验:
更多推荐
如何设计可视化搭建平台的组件商店? 从零设计可视化大屏搭建引擎 从零使用electron搭建桌面端可视化编辑器Dooring (低代码)可视化搭建平台数据源设计剖析 深度剖析github上15.1k Star项目:redux-thunk 【H5制作】5分钟教你用H5-Dooring快速制作H5!
![](https://filescdn.proginn.com/fa9ffd5ea6e29b16de08c043fcd556d5/908b8f491736a99bb09aa8fb23ef1d95.webp)
点个在看你最好看
![](https://filescdn.proginn.com/87beb7036583ad7352bc75b052a376fd/9933695564d00851b2f561463dbe9f2f.webp)
评论
better-keyboard移动端键盘组件
better-keyboard是使用Javascript编写的移动端键盘组件,不支持使用rem和em做布局的项目Options参数defaultResult: [] 默认值containEl: bod
better-keyboard移动端键盘组件
0
vue-mb-touchVue 移动端事件组件
vue-mb-touchvue-mb-touch是一个vue的移动端的事件项目,内置了点击(press)事件,长按(press)事件安装npminstallvue-mb-touch使用方法安装引入在需
vue-mb-touchVue 移动端事件组件
0
ListLoading移动端加载组件
listloading.jslistloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.jsv5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.j
ListLoading移动端加载组件
0
swipejs移动端滑动JS库
SwipeJS是一个轻量级的移动滑动组件,支持1:1的触摸移动,阻力以及防滑。Swipe为移动的web应用带来了新的交互方式,可以让移动web应用展现更多的内容。
swipejs移动端滑动JS库
0