slide captcha verify 滑动验证条插件
简体中文 | English
滑动条验证插件
在线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
| 名称 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| elementId | string | 是 | null | 挂载点的 dom id |
| photo | string or array | 否 | null | 背景图片url 或 背景图片url组成的数组 |
| onSuccess | function | 是 | null | 验证通过时回调此函数 |
| onFail | function | 是 | null | 验证失败时回调此函数 |
| onRefresh | function | 是 | null | 点击重新加载图标时回调此函数 |
| source | array | 否 | null | [x, y, width, height] 仅在设置 photo 之后生效，截取给定图片。x,y 设置截取的横纵坐标起始点，width, height 设置截取的宽度和高度，举例 |
此项目参考 canvas滑动验证码
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
