sv

slide-verify

slide captcha verify 滑动验证条插件

Showing:

Popularity

Downloads/wk

9

GitHub Stars

24

Maintenance

Last Commit

3mos ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

slide-verify

简体中文 | English

滑动条验证插件

License

Downloads

在线Demo

在线Demo

安装

npm install slide-verify -S

快速开始

import SlideVerify from 'slide-verify'

const Slide = new SlideVerify({
  elementId: "root", // DOM挂载点
  onSuccess: () => {console.log("success")}, // 成功回调
  onFail: () => {console.log("fail")}, // 失败回调
  onRefresh: () => {console.log("refresh")}, // 刷新回调
  photo: 'www.xxx.com/img' // 背景图片地址
})
<body>
    <div id="root"></div>
</body>

elementId 为挂载点的 dom id

外部引入方式

<head>
    <script src="../node_modules/slide-verify/dist/slide-verify.js"></script>
</head>
<body>
   <div id="root"></div>
   <script>
     var Slide = new SlideVerify({
       elementId: "root",
       onSuccess: () => {console.log("success")},
       onFail: () => {console.log("fail")},
       onRefresh: () => {console.log("refresh")},
     })
   </script>
</body>

api

new SlideVerify(option)

Options

名称类型必填默认值说明
elementIdstringnull挂载点的 dom id
photostring or arraynull背景图片url 或 背景图片url组成的数组
onSuccessfunctionnull验证通过时回调此函数
onFailfunctionnull验证失败时回调此函数
onRefreshfunctionnull点击重新加载图标时回调此函数
sourcearraynull[x, y, width, height] 仅在设置 photo 之后生效,截取给定图片。x,y 设置截取的横纵坐标起始点,width, height 设置截取的宽度和高度,举例

特性

  1. 使用 css-module 开发,放心使用,没有 css 污染困扰
  2. UMD 方式打包,多种引入方式(external、es6)
  3. 支持 TypeScript 内含 types 声明文件

感谢 Contribution

此项目参考 canvas滑动验证码

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100