vue uniapp 同意验证码滑块验证

前言 (vue-puzzle-vcode)

发送验证码以及登录的时候会做验证,防止机刷等
效果图
在这里插入图片描述

一、安装依赖

npm install vue-puzzle-vcode --save

二、使用步骤

1.html使用

<Vcode :show="isShow" @success="onSuccess"/>

2.js

import Vcode from "vue-puzzle-vcode";export default {data(){return {isShow: false, // 验证码模态框是否出现}},components:{Vcode},methods:{// 用户通过了验证success(){this.isShow = false; // 通过验证后,需要手动隐藏模态框},}}

3.参数说明

字段类型默认值说明
showBooleanfalse是否显示验证码弹框
canvasWidthNumber310主图区域的宽度
canvasHeightNumber160主图区域的高度
imgsArraynull自定义图片,见下方例子
successTextString验证通过验证成功时的提示文字
failTextString“验证失败,请重试”验证失败时的提示文字
sliderTextString“拖动滑块完成拼图”下方滑动条里的文字

4.事件

事件名返回值说明
success偏差值验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值px
fail偏差值验证失败时会触发,返回值同上
closenull用户点击遮罩层的回调

5.图片太丑,自定义

html

<template><Vcode :imgs="[Img1, Img2]" />
</template>

js

<script>
//注意图片路径
import Img1 from '~/assets/img1.png';
import Img2 from '~/assets/img2.png';export default {data(){return {Img1,Img2}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/59625.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++day7

1. #include <iostream> #include <vector> #include <fstream> using namespace std; class Stu { public:string name;int id;int age;Stu(){}Stu(string n,int i,int a):name(n),id(i),age(a){}void show(){cout << "姓名&#xff1a; "…

Jmeter 如何才能做好接口测试?

现在对测试人员的要求越来越高&#xff0c;不仅仅要做好功能测试&#xff0c;对接口测试的需求也越来越多&#xff01; 所以也越来越多的同学问&#xff0c;怎样才能做好接口测试&#xff1f; 要真正的做好接口测试&#xff0c;并且弄懂如何测试接口&#xff0c;需要从如下几…

Vue2项目练手——通用后台管理项目第一节

Vue2项目练手——通用后台管理项目 知识补充yarn和npm区别npm的缺点&#xff1a;yarn的优点 npm查看镜像和设置镜像 项目介绍项目的技术栈 项目搭建文件目录 创建路由&#xff0c;引入element-uirouter/index.jsmain.jspages/Users.vuepages/Main.vuepages/Home.vuepages/Login…

启迪未来:学乐多光屏P90引领儿童智能学习革命

在当今数字化时代&#xff0c;教育方式正经历着巨大的变革&#xff0c;智能硬件为教育领域带来了前所未有的机遇和挑战。学乐多光屏学习机作为一款创新的教育智能硬件产品&#xff0c;以其独特的特点和优势&#xff0c;引领着学习机领域的发展潮流。 1. 多功能融合&#xff1a;…

Android 基础知识

一、Activity 1、onSaveInstanceState(),onRestoreInstanceState的调用时机 onSaveInstanceState 调用时机 从最近应用中选择运行其他程序时 但用户按下Home键时 屏幕方向切换时 按下电源案件时 从当前activity启动一个新的activity时 onRestorInstanceState调用时机 只…

C中字符串转16禁止数组指令

当上位机用字符串的形式下发16进制通讯指令给到下位机时的指令解析: 方法一&#xff1a;查表法 size_t charToHex(const char *data, uint8_t *result) {size_t size 0;uint8_t i 0, j 0, k 0, n 0;char listA[] {"0123456789abcdef"};uint8_t mid[256];for …

C/C++学习——单例模式(懒汉模式与饿汉模式)

C/C学习——单例模式 一、什么是单例模式&#xff1f;二、单例模式应用三、单例模式的特点注意&#xff1a;静态成员变量的使用示例代码&#xff1a; 四、单例模式C代码示例&#xff08;饿汉模式&#xff09;五、单例模式C示例代码&#xff08;懒汉模式&#xff09; 一、什么是…

记一个有趣的bug:修改结构体中的切片不生效

问题描述&#xff1a;有一个interface类型的变量&#xff0c;把一个struct赋值给了它&#xff0c;类似下面这样 package mainimport "fmt"type ResData struct {Type stringSrcid stringSearchRes interface{} }type Data struct {name []string }func mai…

【线程同步】AQS抽象排队同步器(AbstractQueuedSynchronizer)

AQS(AbstractQueuedSynchronizer)抽象排队同步器 AbstractQueuedSynchronizer AQS就是AbstractQueuedSynchronizer类 AQS其实就是JUC包下的一个基类&#xff0c;JUC下的很多内容都是基于AQS实现了部分功能&#xff0c;比如ReentrantLock&#xff0c;ThreadPoolExecutor&#…

用变压器实现德-英语言翻译【01/8】:嵌入层

一、说明 本文是“用变压器实现德-英语言翻译”系列的第一篇文章。它引入了小规模的嵌入来建立感知系统。接下来是嵌入层的变压器使用。下面简要概述了每种方法&#xff0c;然后是德语到英语的翻译。 二、技术背景 嵌入层的目标是使模型能够详细了解单词、标记或其他输入之间的…

多模态知识学习

问题背景 海量多模态数据&#xff0c;人类认知事物也是多模态的深度学习为多模态联合学习奠定基础感知智能->认知智能多模态学习case&#xff1a;微软小冰、视频平台“只看TA”&#xff08;服务特定明星粉丝等&#xff1a;优酷、爱奇艺等&#xff09;需求&#xff1a;多模态…

实验室的服务器和本地pycharm怎么做图传

参考 远程调试 qt.qpa.xcb: could not connect to display, echo DISPLAY为空[已解决]_功夫小象的博客-CSDN博客 先安装x11 MobaXterm x11-forwarding_C--G的博客-CSDN博客 我是在容器中搞得 1&#xff0c;安装qt5 pip install PyQt5 -i https://pypi.douban.com/simple …

P5738 【深基7.例4】歌唱比赛

题目描述 n ( n ≤ 100 ) n(n\le 100) n(n≤100) 名同学参加歌唱比赛&#xff0c;并接受 m ( m ≤ 20 ) m(m\le 20) m(m≤20) 名评委的评分&#xff0c;评分范围是 0 0 0 到 10 10 10 分。这名同学的得分就是这些评委给分中去掉一个最高分&#xff0c;去掉一个最低分&#x…

java系统问题定位思路

一、在不同环境排查问题&#xff0c;有不同的方式 1、如果是在自己的开发环境排查问题&#xff0c;那你几乎可以使用任何自己熟悉的工具来排查&#xff0c;甚至可以进行单步调试。只要问题能重现&#xff0c;排查就不会太困难&#xff0c;最多就是把程序调试到 JDK 或三方类库内…

datax 使用

环境准备 List itemLinuxJDK(1.8以上&#xff0c;推荐1.8)Python(2或3都可以)Apache Maven 3.x (Compile DataX) 下载 wget https://datax-opensource.oss-cn-hangzhou.aliyuncs.com/202308/datax.tar.gz建立datax 用户 useradd datax ; echo "datax" | passwd -…

登录页面设计的7个小细节,帮你提升用户体验

移动 APP 登录页面的设计直接影响到用户体验&#xff0c;从而决定 APP 的成败。我们应该设计出令用户兴奋而不是沮丧的登录界面。下面就让我和你分享几个提升登录页面 UX 设计的技巧: 如果用户必须登录才能使用服务&#xff0c;那么需要仔细考虑登录表单。 在构建登录页面设计…

Nuxt3打包部署到Linux(node+pm2安装和运行步骤+nginx代理)

最近&#xff0c;我们项目组的工作接近尾声&#xff0c;需要把项目部署上线。由于前端第一次使用Nuxt3框架&#xff0c;后端也是第一次部署Nuxt3项目&#xff0c;所以刚开始出现了很多问题。在我上网搜索很多教程后&#xff0c;得到了基本的流程。 1.服务器安装node.js环境 N…

华为鲲鹏服务器

1.简介 鲲鹏通用计算平台提供基于鲲鹏处理器的TaiShan服务器、鲲鹏主板及开发套件。硬件厂商可以基于鲲鹏主板发展自有品牌的产品和解决方案&#xff1b;软件厂商基于openEuler开源OS以及配套的数据库、中间件等平台软件发展应用软件和服务&#xff1b;鲲鹏开发套件可帮助开发…

深入解析SNMP协议及其在网络设备管理中的应用

SNMP&#xff08;Simple Network Management Protocol&#xff0c;简单网络管理协议&#xff09;作为一种用于网络设备管理的协议&#xff0c;在实现网络设备的监控、配置和故障排除方面发挥着重要的作用。本文将深入解析SNMP协议的工作原理、重要概念和功能&#xff0c;并探讨…

C++自创题目——第一期

一、题目描述&#xff1a; 在一段时间内&#xff0c;到达港口的船有n艘&#xff0c;其中每艘船的信息包括:到达时间t(表示第t秒)&#xff0c;船上乘客数k&#xff0c;以及k名乘客的国籍。输出前3600s内每艘船上国籍种数&#xff0c;并输出国籍种数最少的船只的到达时间。 二、…