当前位置: 首页 > 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操作).系统调用: 向…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...