Npx-slider-verify NPM

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>

第三步

// css 中的样式，可根据自己想要的效果进行覆盖
#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%