<template> <Vcode type="inside" :show="isShow" /> </template> .box{ position: relative; width: 320px; height: auto; } Nuxt.js注意Nuxt.js中如果发现样式有问题,请使用npm install vue3-puzzle-vcode@1.1.2-nuxt这个版本试试。Readme KeywordsnonePackage Sidebar Install npm...
vue3-puzzle-vcode是一个vue 拼图人机验证右滑拼图验证。用于vue项目快速集成拼图拖动验证码功能。 vue3-puzzle-vcode项目地址:https://github.com/javaLuo/vue-puzzle-vcode/blob/master/README3.md 演示地址:https://isluo.com/work/vue-puzzle-vcode/ 使用方法 安装vue3-puzzle-vcode包 npm install vue3-p...
vue-puzzle-vcode Vue 纯前端的拼图人机验证、右滑拼图验证 我知道有第 3 方的很好用,比如 GEETEST 的拼图验证,但要引入 SDK 跟后台配合,还有接口交互。 太麻烦了,有时候突然改需求来不及弄,为了应付老板,就弄了个纯前端的随便验一下得了。 DEMO: https://isluo.com/work/vue-puzzle-vcode/ Vue3.x的...
npm包地址:https://www.npmjs.com/package/vue3-puzzle-vcode npm安装 npm install vue3-puzzle-vcode --save 最简单例子: <template> <Vcode :show="isShow" @success="onSuccess" @close="onClose"/> 开始验证 </template> import { ref } from "vue"; import Vcode from "vue3-puzzle-vcode...
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=...
vue3-puzzle-vcode 是一个专为 Vue 3 设计的拼图式人机验证插件。它利用拼图验证机制来提高Web表单的安全性,防止自动化脚本的攻击。该插件采用纯前端实现,无需复杂的后端集成,适合快速部署和轻量级验证方案。 二、安装方法 你可以通过 npm 或 yarn 将 vue3-puzzle-vcode 组件包安装到你的 Vue 3 项目中。以下是...
DEMO:https://isluo.com/work/vue-puzzle-vcode/ 最简单例子 <template> <Vcode:show="isShow"@success="onSuccess"@close="onClose"/> 开始验证 </template> import{ref}from"vue";importVcodefrom"vue3-puzzle-vcode";constisShow=ref(false);constonShow=()=>{isShow.value=true;};constonClose=(...
简介:利用vue的 vue-puzzle-vcode插件实现验证码功能。 概要 ` 利用vue的vue-puzzle-vcode插件实现验证码功能。 结尾有示例完整代码 场景示例及其讲解 下载插件 利用npm/cnpm下载插件代码 npm i -S vue-puzzle-vcode 导入组件 import vcode from 'vue-puzzle-vcode' ...
vue-puzzle-vcode Vue 纯前端的拼图人机验证、右滑拼图验证 我知道有第 3 方的很好用,比如 GEETEST 的拼图验证,但要引入 SDK 跟后台配合,还有接口交互。 太麻烦了,有时候突然改需求来不及弄,为了应付老板,就弄了个纯前端的随便验一下得了。 DEMO: https://isluo.com/work/vue-puzzle-vcode/ Vue3.x的...
importVcodefrom"vue-puzzle-vcode";exportdefault{data(){return{isShow:false,//验证码模态框是否出现}},components:{Vcode},methods:{//用户通过了验证success(){this.isShow=false;//通过验证后,需要手动隐藏模态框},}} 参数 事件 自定义图片