vue3 滑块拼图验证码(vue3-puzzle-vcode)

gitee地址

https://www.npmjs.com/package/vue3-puzzle-vcode

第一步 安装 在vue项目里面 

 npm install vue3-puzzle-vcode --save

第二步  在项目里面引入组件

        import Vcode from "vue3-puzzle-vcode";

声明组件

components: {

			Vcode
		}

第三步 代码写入

	<div>
		<Vcode :show="isShow" @success="success" @close="close" @fail='fail'></Vcode>
		<button @click="submit">登录</button>
	</div>

第四步 定义方法

//图片滑块验证码
			submit() {
				this.isShow = true;
			},
			// 用户通过了验证
			success(msg) {
				this.isShow = false; // 通过验证后，需要手动隐藏模态框
				console.log('验证通过' + msg);
			},
			// 用户点击遮罩层，应该关闭模态框
			close() {
				this.isShow = false;
			},
			// 用户验证失败
			fail() {
				console.log('验证失败');
			}