当前位置: 首页 > news >正文

Vue3-滑动到最右验证功能

1、思路

1、在登录页面需要启动向右滑块验证

2、效果图

3、文章地址:滑动验证码的实现-vue-simple-verify

2、成分分析

1、由三块构成,分别是底部条、拖动条、拖动移动部分

2、底部条:整体容器,包括背景、边框和文字(请按住滑块,拖动到最右边)

3、拖动条:图片+边框+背景色即可

4、完成部分:背景、边框和文字(验证完成)

3、事件分析

1、鼠标按下事件:记录鼠标位置以及状态

2、鼠标移动事件:计算滑块位置

3、鼠标离开事件:更新状态至初始状态

4、鼠标抬起事件:更新状态至初始状态

4、效果图

5、代码

1、SlideVerify.vue文件

<template><divref="sliderContainer"@mousemove="onMouseMove"@mouseup="onMouseUp"class="slider-verify-container"@mouseleave="onMouseLeave"><span v-if="blockState === 0">请按住滑块,拖动到最右边</span><div@mousedown="onMouseDown":style="{ left: leftP }"class="slider-verify-block"/><div :style="{ width: leftP }" class="slider-verify-complete"><span v-if="blockState === 2">验证成功</span></div></div>
</template><script setup>
import { ref, defineEmits } from "vue";const emit = defineEmits(["success", "failed"]);const leftP = ref("0");const blockState = ref(0);const startP = ref(undefined);const sliderContainer = ref(undefined);
const onMouseDown = (e) => {if (blockState.value !== 2) {leftP.value = "0";blockState.value = 1;startP.value = {clientX: e.clientX,};} else {leftP.value = "0";blockState.value = 0;}
};
const onMouseMove = (e) => {if (blockState.value === 1) {let width = e.clientX - startP.value.clientX;if (width + 56 > 400) {leftP.value = 400 - 56 + "px";blockState.value = 2;emit("success");} else {leftP.value = width + "px";}}
};
const onMouseUp = (e) => {if (blockState.value !== 2) {leftP.value = "0";blockState.value = 0;emit("failed");}
};
const onMouseLeave = (e) => {if (blockState.value !== 2) {leftP.value = "0";blockState.value = 0;emit("failed");}
};
</script><style lang="scss" scoped>
.slider-verify-container {width: 100%;height: 56px;background-color: transparent;position: relative;border: solid 1px #20cccf;text-align: center;color: #20cccf;line-height: 56px;user-select: none;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;
}
.slider-verify-complete {width: 0;height: 56px;position: absolute;background-color: #00e6f14f;left: 0;top: 0;
}
.slider-verify-block {width: 56px;height: 56px;background-image: url("@/assets/images/login6/arrow.png");background-color: white;position: absolute;left: 0;top: -1px;border: solid 1px #20cccf;background-size: 50%;background-repeat: no-repeat;background-position: center;
}
</style>

2、调用代码

<slide-verify @success="onVerifySuccess" @failed="onVerifyFailed" />

相关文章:

Vue3-滑动到最右验证功能

1、思路 1、在登录页面需要启动向右滑块验证 2、效果图 3、文章地址&#xff1a;滑动验证码的实现-vue-simple-verify 2、成分分析 1、由三块构成&#xff0c;分别是底部条、拖动条、拖动移动部分 2、底部条&#xff1a;整体容器&#xff0c;包括背景、边框和文字&#xf…...

深入理解MyBatis XML配置文件

MyBatis是一款优秀的持久层框架&#xff0c;简化了数据库操作的复杂性&#xff0c;提高了开发效率。在MyBatis中&#xff0c;XML配置文件扮演了重要角色&#xff0c;用于配置数据源、事务管理、SQL映射等内容。本文将详细介绍MyBatis的XML配置文件&#xff0c;帮助读者更好地理…...

006 CentOS 7.9 elasticsearch7.10.0安装及配置

文章目录 一、安装Elasticsearch 7.10.0二、安装Logstash 7.10.0三、配置防火墙和网络访问可能出现的错误配置 Elasticsearch官方网址&#xff1a; https://www.elastic.co Elasticsearch中文官网地址&#xff1a;https://www.elastic.co/cn/products/elasticsearch https://…...

蚂蚁分类信息系统二开仿么么街货源客模板微商货源网源码(带手机版)

源码介绍 网站采用蚂蚁分类信息系统二次开发&#xff0c;模板仿么么街货源客模板&#xff0c;微商货源网定制版。 模板设计风格简洁&#xff0c;分类信息采用列表形式发布&#xff0c;这种设计方式非常符合度娘 SEO 规则。收录效果是杠杠的。 这个网站风格目前是用来做货源推…...

综合数据分析及可视化实战

【实验目的】 1、掌握数据分析常用的几种扩展库: numpy、pandas、matplotlib。 2、理解数据分析的几种方法&#xff0c;即描述性数据分析&#xff0c;探索性数据分析 和验证性数据分析。 3、理解数据分析的基本步骤:数据准备、数据导入、数据预处理、数 据分析和数据可视化…...

N32G45XVL-STB之移植LVGL(8.4.0)

目录 概述 1 系统软硬件 1.1 软件版本信息 1.2 ST7796-LCD 1.3 MCU IO与LCD PIN对应关系 2 认识LVGL 2.1 LVGL官网 2.2 下载V8.4.0 3 移植LVGL 3.1 硬件驱动实现 3.2 添加LVGL库文件 3.3 移植和硬件相关的代码 3.3.1 驱动接口相关文件介绍 3.3.2 重新接口函数 3…...

SwaggerSpy:一款针对SwaggerHub的自动化OSINT安全工具

关于SwaggerSpy SwaggerSpy是一款针对SwaggerHub的自动化公开资源情报&#xff08;OSINT&#xff09;安全工具&#xff0c;该工具专为网络安全研究人员设计&#xff0c;旨在简化广大红队研究人员从SwaggerHub上收集已归档API信息的过程&#xff0c;而这些OSINT信息可以为安全人…...

Python酷库之旅-比翼双飞情侣库(05)

目录 一、xlrd库的由来 二、xlrd库优缺点 1、优点 1-1、支持多种Excel文件格式 1-2、高效性 1-3、开源性 1-4、简单易用 1-5、良好的兼容性 2、缺点 2-1、对.xlsx格式支持有限 2-2、功能相对单一 2-3、更新和维护频率低 2-4、依赖外部资源 三、xlrd库的版本说明 …...

numpy数组transpose方法的基本原理

背景&#xff1a;记录一下numpy数组维度顺序操作 一、具体示例 transpose方法用于交换数组的轴&#xff0c;改变数组的维度顺序。方法的参数是一个代表新轴顺序的元组。 假设你有一个三维数组&#xff0c;其形状是 (a, b, c)&#xff0c;即有 a 个块&#xff0c;每个块中有 b…...

Docker Swarm集群部署管理

Docker Swarm集群管理 文章目录 Docker Swarm集群管理资源列表基础环境一、安装Docker二、部署Docker Swarm集群2.1、创建Docker Swarm集群2.2、添加Worker节点到Swarm集群2.3、查看Swarm集群中Node节点的详细状态信息 三、Docker Swarm管理3.1、案例概述3.2、Docker Swarm中的…...

碎片化知识如何被系统性地吸收?

一、方法论 碎片化知识指的是通过各种渠道快速获取的零散信息和知识点&#xff0c;这些信息由于其不完整性和孤立性&#xff0c;不易于记忆和应用。为了系统性地吸收碎片化知识&#xff0c;可以采用以下策略&#xff1a; 1. **构建知识框架**&#xff1a; - 在开始吸收之前&am…...

安鸾学院靶场——安全基础

文章目录 1、Burp抓包2、指纹识别3、压缩包解密4、Nginx整数溢出漏洞5、PHP代码基础6、linux基础命令7、Mysql数据库基础8、目录扫描9、端口扫描10、docker容器基础11、文件类型 1、Burp抓包 抓取http://47.100.220.113:8007/的返回包&#xff0c;可以拿到包含flag的txt文件。…...

ChatGPT:自然语言处理的新纪元与OpenAI的深度融合

随着人工智能技术的蓬勃发展&#xff0c;自然语言处理&#xff08;NLP&#xff09;领域取得了显著的进步。OpenAI作为这一领域的领军者&#xff0c;以其卓越的技术实力和创新能力&#xff0c;不断推动着NLP领域向前发展。其中ChatGPT作为OpenAI的重要成果更是在全球范围内引起了…...

AI引领项目管理新时代:效率与智能并驾齐驱

在数字化浪潮的推动下&#xff0c;项目管理领域正迎来一场由AI技术引领的革新。从自动化任务执行到智能决策支持&#xff0c;AI技术的应用正让项目管理变得更加高效、精准和智能化。本文将探讨项目管理人员及其实施团队如何运用AI技术&#xff0c;以及这些技术如何助力项目管理…...

AUTOSAR汽车电子嵌入式编程精讲300篇-电池管理系统中 CAN 通信模块的设计与应用(中)

目录 2.3 BMS 中 CAN 通信模块软硬件设计 2.3.1 CAN 通信模块硬件电路设计 2.3.2 CAN 通信模块软件设计 2.3.2.1 CAN 底层程序设计 2.3.2.2 CAN 底层初始化 2.3.2.3 CAN 底层接收 3.3.1.3 CAN 底层发送 2.4 通信协议的实现 2.4.1 整车通信协议的实现 2.4.2 充电机通信协议的实现…...

k8s概述

文章目录 一、什么是Kubernetes1、官网链接2、概述3、特点4、功能 二、Kubernetes架构1、架构图2、核心组件2.1、控制平面组件&#xff08;Control Plane Components&#xff09;2.1.1、kube-apiserver2.1.2、etcd2.1.3、kube-scheduler2.1.4、kube-controller-manager 2.2、No…...

多线程的运用

在现代软件开发中&#xff0c;多线程编程是一个非常重要的技能。多线程编程不仅可以提高应用程序的性能&#xff0c;还可以提升用户体验&#xff0c;特别是在需要处理大量数据或执行复杂计算的情况下。本文将详细介绍Java中的多线程编程&#xff0c;包括其基本概念、实现方法、…...

TF-IDF(Term Frequency-Inverse Document Frequency)算法

TF-IDF&#xff08;Term Frequency-Inverse Document Frequency&#xff09;是一种用于文本挖掘和信息检索的统计方法&#xff0c;主要用于评估一个单词在一个文档或一组文档中的重要性。它结合了词频&#xff08;TF&#xff09;和逆文档频率&#xff08;IDF&#xff09;两个指…...

富格林:细心发现虚假确保安全

富格林指出&#xff0c;现货黄金市场内蕴藏着丰富的盈利机会&#xff0c;然而并非所有人都能够抓住这些机会。要想从市场中获取丰厚的利润并且保障交易的安全&#xff0c;必须要求我们掌握一些交易技巧利用此去发现虚假陷阱。当我们不断汲取技巧过后&#xff0c;才可利用此来发…...

6.2 文件的缓存位置

1. 文件的缓冲 1.1 缓冲说明 将文件内容写入到硬件设备时, 则需要进行系统调用, 这类I/O操作的耗时很长, 为了减少I/O操作的次数, 文件通常使用缓冲区. 当需要写入的字节数不足一个块时, 将数据放入缓冲区, 当数据凑够一个块的大小后才进行系统调用(即I/O操作).系统调用: 向…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...