?推薦!一款支持pc端&移動(dòng)端的滑動(dòng)驗(yàn)證組件
關(guān)注并將「趣談前端」設(shè)為星標(biāo)
每天定時(shí)分享技術(shù)干貨/優(yōu)秀開源/技術(shù)思維
背景介紹
之前有一些朋友在群里問如何實(shí)現(xiàn)一個(gè)滑動(dòng)驗(yàn)證碼插件, 我覺得這個(gè)問題非常有意思, 就自己研究和做了一個(gè), 在研究的過程中由于考慮到組件發(fā)布的效率問題(npm發(fā)布和github倉庫發(fā)布需要單獨(dú)進(jìn)行,有點(diǎn)浪費(fèi)時(shí)間~), 恰好 github 的 action 提供了一套持續(xù)集成方案, 可以支持自動(dòng)化發(fā)布, 所以就調(diào)研并配置了一套 workflows , 技術(shù)棧如下:
react hooks + canvas 技術(shù)技術(shù)選型 dumi 為組件開發(fā)場景而生的文檔工具 fatherjs 組件打包工具 gihub actions 持續(xù)集成方案
目前已經(jīng)在 github 完全開源, 在文末會(huì)附上 github 的地址和文檔, 如果恰好你也有類似的需求, 也可以參考該方案的實(shí)現(xiàn)方式, 如果你對該項(xiàng)目感興趣, 也可以隨時(shí)提 issue 或者參與貢獻(xiàn).
項(xiàng)目介紹和基本使用
上圖是一個(gè)基本的演示demo, react-slider-vertify 目前提供了很多自定義的屬性供用戶來配置, 具體屬性如下:
接下來和大家介紹一下安裝使用方式.
安裝
# 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 />
};
一個(gè)更完整的使用案例:
代碼如下:
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')}
/>
</>
};
大家可以本地測試體驗(yàn)一下. 置于具體的技術(shù)實(shí)現(xiàn), 我后續(xù)會(huì)專門寫一篇文章, 詳細(xì)介紹滑動(dòng)驗(yàn)證的實(shí)現(xiàn)方案, 歡迎大家 star ~
參與貢獻(xiàn)
如果大家對該項(xiàng)目感興趣也可以在 github 上學(xué)習(xí)體驗(yàn), 也可以提 pr 參與項(xiàng)目的貢獻(xiàn).項(xiàng)目地址可以掃描下方二維碼體驗(yàn):
更多推薦
如何設(shè)計(jì)可視化搭建平臺(tái)的組件商店？ 從零設(shè)計(jì)可視化大屏搭建引擎 從零使用electron搭建桌面端可視化編輯器Dooring (低代碼)可視化搭建平臺(tái)數(shù)據(jù)源設(shè)計(jì)剖析 深度剖析github上15.1k Star項(xiàng)目：redux-thunk 【H5制作】5分鐘教你用H5-Dooring快速制作H5!
點(diǎn)個(gè)在看你最好看
