npx-slider-verify
基于Angular8.0的拖拽人机验证组件
使用
第一步
import { NpxSliderVerifyModule } from 'npx-slider-verify';
imports: [
NpxSliderVerifyModule
],
第二步
<lib-npx-slider-verify
[width]="430"
[height]="40"
[btnWidth] = "40"
(verify) = "isVerify($event)"
></lib-npx-slider-verify>
第三步
#verify-warp
width: 400px
height: 60px
background: $beforeBg
border: 1px solid $beforeBorder
color: #3c4b6a
position: relative
display: flex
align-items: center
justify-content: center
p
font-size: 16px
user-select: none
#slider
position: absolute
top: 0
left: 0
bottom: 0
border: 1px solid $beforeBorder
border-top-right-radius: 4px
border-bottom-right-radius: 4px
display: flex
align-items: center
justify-content: center
p.success
display: none
#slider-btn
width: 50px
height: 100%
background: $beforeBtnBg url("./img/arrow.png") no-repeat center center
background-size: auto 70%
border-radius: 4px
box-shadow: 0 0 4px rgba(0,0,0,.4)
cursor: pointer
position: absolute
right: 0
top: 0
#verify-warp.sliding
p.toRight
display: none
#slider
background: $slidingBg
border: 1px solid $slidingBorder
#slider-btn
background: $slidingBorder url("./img/sliding.png") no-repeat center center
background-size: auto 70%
#verify-warp.slided
#slider
background: $slidedBg
border: 1px solid $slidedBorder
p.success
display: block
#slider-btn
background: $slidedBorder url("./img/slided.png") no-repeat center center
background-size: auto 70%
参数
参数 | 说明 | 类型 | 默认值 |
---|
width | 外层宽度 | number | - |
height | 外层高度 | number | - |
btnWidth | 拖拽块的宽度 | number | - |
(verify) | 是否验证通过 | function | - |
#License
MIT License