[[423692]]

背景介紹

之前有一些朋友在群里問(wèn)如何實(shí)現(xiàn)一個(gè)滑動(dòng)驗(yàn)證碼插件, 我覺(jué)得這個(gè)問(wèn)題非常有意思, 就自己研究和做了一個(gè), 在研究的過(guò)程中由于考慮到組件發(fā)布的效率問(wèn)題(npm發(fā)布和github倉(cāng)庫(kù)發(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 為組件開(kāi)發(fā)場(chǎng)景而生的文檔工具
• fatherjs 組件打包工具
• gihub actions 持續(xù)集成方案

目前已經(jīng)在 github 完全開(kāi)源, 在文末會(huì)附上 github 的地址和文檔, 如果恰好你也有類似的需求, 也可以參考該方案的實(shí)現(xiàn)方式, 如果你對(duì)該項(xiàng)目感興趣, 也可以隨時(shí)提 issue 或者參與貢獻(xiàn).

項(xiàng)目介紹和基本使用

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

接下來(lái)和大家介紹一下安裝使用方式.

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

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

大家可以本地測(cè)試體驗(yàn)一下. 置于具體的技術(shù)實(shí)現(xiàn), 我后續(xù)會(huì)專門寫一篇文章, 詳細(xì)介紹滑動(dòng)驗(yàn)證的實(shí)現(xiàn)方案 ~

本文轉(zhuǎn)載自微信公眾號(hào)「趣談前端」