[[423692]]

背景介紹

之前有一些朋友在群里問如何實現一個滑動驗證碼插件, 我覺得這個問題非常有意思, 就自己研究和做了一個, 在研究的過程中由于考慮到組件發布的效率問題(npm發布和github倉庫發布需要單獨進行,有點浪費時間~), 恰好 github 的 action 提供了一套持續集成方案, 可以支持自動化發布, 所以就調研并配置了一套 workflows , 技術棧如下:

• react hooks + canvas 技術技術選型
• dumi 為組件開發場景而生的文檔工具
• fatherjs 組件打包工具
• gihub actions 持續集成方案

目前已經在 github 完全開源, 在文末會附上 github 的地址和文檔, 如果恰好你也有類似的需求, 也可以參考該方案的實現方式, 如果你對該項目感興趣, 也可以隨時提 issue 或者參與貢獻.

項目介紹和基本使用

上圖是一個基本的演示demo, react-slider-vertify 目前提供了很多自定義的屬性供用戶來配置, 具體屬性如下:

接下來和大家介紹一下安裝使用方式.

1.安裝

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

2.使用

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')}  
        /> 
    </>   
}; 

大家可以本地測試體驗一下. 置于具體的技術實現, 我后續會專門寫一篇文章, 詳細介紹滑動驗證的實現方案 ~

本文轉載自微信公眾號「趣談前端」