vue-puzzle-vcode Vue 纯前端的拼图人机验证、右滑拼图验证 我知道有第 3 方的很好用,比如 GEETEST 的拼图验证,但要引入 SDK 跟后台配合,还有接口交互。 太麻烦了,有时候突然改需求来不及弄,为了应付老板,就弄了个纯前端的随便验一下得了。 DEMO: https://isluo.com/work/vue-puzzle-vcod
纯前端的拼图人机验证、右滑拼图验证 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...
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=(...
npm包地址:https://www.npmjs.com/package/vue3-puzzle-vcode npm安装 npm install vue3-puzzle-vcode --save 最简单例子: <template> <Vcode :show="isShow
简介:利用vue的 vue-puzzle-vcode插件实现验证码功能。 概要 ` 利用vue的vue-puzzle-vcode插件实现验证码功能。 结尾有示例完整代码 场景示例及其讲解 下载插件 利用npm/cnpm下载插件代码 npm i -S vue-puzzle-vcode 导入组件 import vcode from 'vue-puzzle-vcode' ...
<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...
npm install vue-puzzle-vcode --save 引入插件: 在你的Vue组件中,通过import语句引入vue-puzzle-vcode。 注册组件: 如果你使用的是全局注册,可以在main.js或main.ts中注册该组件。如果是局部注册,只需在需要使用该组件的Vue文件中注册即可。 配置选项(可选): vue-puzzle-vcode提供了多个配置选项,允许你自定义...
vue-puzzle-vcode Vue 纯前端的拼图人机验证、右滑拼图验证 我知道有第 3 方的很好用,比如 GEETEST 的拼图验证,但要引入 SDK 跟后台配合,还有接口交互。 太麻烦了,有时候突然改需求来不及弄,为了应付老板,就弄了个纯前端的随便验一下得了。 DEMO: https://isluo.com/work/vue-puzzle-vcode/ Vue3.x的...
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/ ...
importVcodefrom"vue-puzzle-vcode";exportdefault{data(){return{isShow:false,//验证码模态框是否出现}},components:{Vcode},methods:{//用户通过了验证success(){this.isShow=false;//通过验证后,需要手动隐藏模态框},}} 参数 事件 自定义图片