1.0.2 • Published 2 years ago
inx-verify v1.0.2
INX-verify 第四代验证码
INX-verify 新一代图灵检测,适用与Vue2.0项目
安装
npm install -g inx-verify[@version]
如下版本:
npm install -g inx-verify@1.0.2
npm install -g inx-verify@1.0.1
npm install -g inx-verify@1.0.0
展示Demo
基础使用
- 安装
- npm i -g inx-verify
配置
- vue项目入口文件 main.js引用资源 import inxVerify from 'inx-verify'
- 挂载vue全局注册 Vue.use(inxVerify)
调用
```js <template> <div id="app"> <main> <section> <h2>语序点击</h2> <orderVerify></orderVerify> </section> <section> <h2>顺序点击</h2> <pointVerify></pointVerify> </section> <section> <h2>滑块拖动</h2> <slideVerify></slideVerify> </section> </main> </div>
props说明
- slideVerify组件
// 拖拽模块宽度 l: { type: Number, default: 42, }, // 拖拽模块圆角 r: { type: Number, default: 10, }, // 画布宽度 w: { type: Number, default: 400, }, // 画布高度 h: { type: Number, default: 200, }, // 滑块提示信息 sliderText: { type: String, default: '左侧滑块将图片还原', }, // 校准精度 accuracy: { type: Number, default: 5, // 若为 -1 则不进行机器判断 }, // 控件内部刷新按钮 refreshIconShow: { type: Boolean, default: true, }, // canvas图片展示 imgs: { type: Array, default: () => [ 'https://kora-kr.github.io/assets/img/0.ed1b9c0d.jpg', 'https://kora-kr.github.io/assets/img/1.5aaed007.jpg', 'https://kora-kr.github.io/assets/img/2.0604aa3e.jpg', 'https://kora-kr.github.io/assets/img/3.5aaed007.jpg', 'https://kora-kr.github.io/assets/img/4.2011bb84.jpg', ], },
- orderVerify、pointVerify组件
//弹出式pop,固定fixed mode: { type: String, default: "fixed", }, //默认的文字数量 defaultNum: { type: Number, default: 5, }, //校对的文字数量 checkNum: { type: Number, default: 4, }, //间隔 vSpace: { type: Number, default: 5, }, imgUrl: { type: String, default: "http://via.placeholder.com/", }, imgs: { type: Array, default: () => [ 'https://kora-kr.github.io/assets/img/0.ed1b9c0d.jpg', 'https://kora-kr.github.io/assets/img/1.5aaed007.jpg', 'https://kora-kr.github.io/assets/img/2.0604aa3e.jpg', 'https://kora-kr.github.io/assets/img/3.5aaed007.jpg', 'https://kora-kr.github.io/assets/img/4.2011bb84.jpg', ], }, imgName: { type: Array, default() { return ["350x150", "350x450"]; }, }, // 画布尺寸 imgSize: { type: Object, default() { return { width: "400px", height: "200px", }; }, }, // 底部提示尺寸 barSize: { type: Object, default() { return { width: "400px", height: "56px", }; }, },
事件监听(成功、失败)
<orderVerify @success="onSuccess"></orderVerify>
<pointVerify @success="onSuccess"></pointVerify>
<slideVerify ref="slideBlock" @success="onSuccess" @again="onAgain" @fulfilled="onFulfilled" @fail="onFail" @refresh="onRefresh" :accuracy="accuracy"></slideVerify>
...
onSuccess(times) {
setTimeout(() => {
this.msg = '验证成功'
}, 1e3);
// this.msg = '验证成功'
// this.msg = `验证成功, 耗时${(times / 1000).toFixed(1)}s`;
},
备注
to be continued