INX-verify 第四代验证码

INX-verify 新一代图灵检测，适用与Vue2.0项目

安装

npm install -g inx-verify[@version]

如下版本：
npm install -g [email protected]
npm install -g [email protected]
npm install -g [email protected] 

展示Demo

基础使用

1. 安装

• npm i -g inx-verify

2. 配置

   • vue项目入口文件 main.js引用资源 import inxVerify from 'inx-verify'
   • 挂载vue全局注册 Vue.use(inxVerify)

3. 调用

   <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>

4. 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",
   			};
   		},
   	},

5. 事件监听(成功、失败)

<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