npm包地址:https://www.npmjs.com/package/vue3-puzzle-vcode npm安装 npm install vue3-puzzle-vcode --save 最简单例子: <template> <Vcode :show="isShow" @success="onSuccess" @close="onClose"/> <button @click="onShow">开始验证
vue3-puzzle-vcode 插件详解 一、基本信息与功能 vue3-puzzle-vcode 是一个专为 Vue 3 设计的拼图式人机验证插件。它利用拼图验证机制来提高Web表单的安全性,防止自动化脚本的攻击。该插件采用纯前端实现,无需复杂的后端集成,适合快速部署和轻量级验证方案。 二、安装方法 你可以通过 npm 或 yarn 将 vue3-puzzle...
npm install vue3-puzzle-vcode --save 在需要使用的项目文件中引入vue3-puzzle-vcode包 import Vcode from "vue3-puzzle-vcode"; 在项目页面中加入vcode组件节点,使用一个变量vCodeFlag标识是否显示验证界面,验证成功后组件会回调success回调函数,我们在此回调中写入自己的逻辑就可以实现验证成功的后续业务代码。 <...
1、vue-puzzle-vcode github地址:https://github.com/javaLuo/vue-puzzle-vcode 效果图# 示例# import Vcode from"vue-puzzle-vcode"; <Vcode:show="isShow":canvasWidth="400":canvasHeight="250":puzzleScale="1":sliderSize="40":range="10":imgs="[Img1, Img2]"successText="验证成功!"failText=...
npm i -S vue-puzzle-vcode 导入组件 import vcode from 'vue-puzzle-vcode' 使用组件 设置data、success(成功返回函数)、close(关闭函数) data(){return{isShow:false}},methods:{// 成功时关闭页面success(){this.isShow=false},// 点击遮罩层关闭close(){this.isShow=false}}} ...
一, vue-puzzle-vcode插件【推荐】 GitHub地址:beeworkshop/vue-puzzle-vcode 1、安装vue-puzzle-vcode cnpm i -S vue-puzzle-vcode 1. 2,实现代码 <template> <Vcode :show="isShow" @success="success" @close="close" /> <el-button @click="submit">登录</el-button> </template...
使用 import Vcode from "vue-puzzle-vcode"; <Vcode:show="isShow"@success="onSuccess"@close="onClose"/> IE 我没加babel-polyfill,所以在 IE 里会报错:SCRIPT1002: 语法错误(IE 不支持箭头 函数) 需要兼容 IE 的朋友,请直接复制src/app.vue和src/assets这两个东西 到自己的项目里,给app.vue随便改个...
Vue的图片滑动验证 首先安装插件支持(先简要概述下组件参数的配置信息和配置位置)npm install vue-puzzle-vcodehtml代码部分<Vcode :show="isShow" @success="success"/>其中@success是验证成功之后的回调JS代码import Vcode from "vue-puzzle-vcod Vue 转载 mob604756f1c0ca 2021-05-09 00:04:18 606阅读 2...
npm install vue-puzzle-vcode --save 使用 import Vcode from "vue-puzzle-vcode"; <Vcode :show="isShow" @success="onSuccess" @close="onClose" /> IE 我没加babel-polyfill,所以在 IE 里会报错:SCRIPT1002: 语法错误(IE 不支持箭头函数) 需要兼容 IE 的朋友,请直接复制src/app.vue和src/assets这两...