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" />

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

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

相关文章

2024中国翻译行业发展报告

来源&#xff1a;中国翻译协会 近期历史回顾&#xff1a; 2024国内工商业储能市场研究报告.pdf 2023幸福企业白皮书.pdf 2024年欧亚地区移动经济报告.pdf 内容供应链变革 2023人工智能与首席营销官&#xff08;CMO&#xff09; AI科技对PC产业的影响.pdf 金融业数据应用发展报…

多应用对接企业微信授权和扫码登录

多应用对接企业微信授权和扫码登录是一种常见的企业级解决方案&#xff0c;它可以帮助企业实现统一的身份验证和管理&#xff0c;提升用户体验和安全性。本文将介绍如何实现多应用对接企业微信授权和扫码登录的方法和步骤。 # 第一步&#xff1a;注册企业微信开放平台应用 首…

批量文件重命名技巧:轻松替换删除文件夹名中的字母,实现高效文件管理新境界

在数字化时代&#xff0c;我们每天都会面对大量的文件和文件夹。无论是工作文档、学习资料还是个人收藏&#xff0c;文件命名的规范性都显得尤为重要。然而&#xff0c;手动一个一个去修改文件名&#xff0c;不仅耗时耗力&#xff0c;还容易出错。那么&#xff0c;有没有一种方…

Linux-黑马程序员

目录 一、前言二、初识Linux1、操作系统&#xff08;1&#xff09;硬件和软件&#xff08;2&#xff09;操作系统 2、Linux3、虚拟机4、FinalShell5、WSL6、虚拟机快照 三、Linux基础命令1、Linux的目录结构2、Linux命令入门&#xff08;1&#xff09;Linux命令基础格式&#x…

UDS诊断、整车控制器诊断、ECU刷写、TBOX测试、GW测试

需要以下资料的可以私信我 TBOX 深圳 涉及过T-BOX测试吗Ota升级涉及的台架环境是什么样的&#xff1f;上车实测之前有没有一个仿真环境台架环境都什么零部件T-BOX了解多少Linux和shell有接触吗 单片机uds诊断是在实车上座的吗 uds在实车上插的那口 诊断仪器是哪个车机有没…

ESP RainMaker®为企业提供AIoT云解决方案,启明云端乐鑫代理商

在AIoT的浪潮中&#xff0c;企业面临着前所未有的机遇与挑战。如何快速响应市场变化&#xff0c;开发出具有竞争力的智能产品&#xff1f;如何确保数据安全&#xff0c;同时实现高效的设备管理&#xff1f;这些问题&#xff0c;ESP RainMaker给出了答案。 ESP RainMaker是一个…

openh264 帧内预测编码过程源码分析

函数关系 说明&#xff1a; 可以看到完成帧内预测编码的核心函数就是 WelsMdI16x16、WelsMdI4x4、WelsMdI4x4Fast 、WelsMdIntraChroma 四个函数。 原理 WelsMdI16x16函数 功能&#xff1a;针对16x16像素块的帧内模式决策过程&#xff1a; 局部变量申明&#xff1b;根据宏块…

GAN的入门理解

这一篇主要是关于生成对抗网络的模型笔记&#xff0c;有一些简单的证明和原理&#xff0c;是根据李宏毅老师的课程整理的&#xff0c;下面有链接。本篇文章主要就是梳理基础的概念和训练过程&#xff0c;如果有什么问题的话也可以指出的。 李宏毅老师的课程链接 1.概述 GAN是…

Android14音频进阶之CarAudioManager::getOutputDeviceForUsage流程分析(七十七)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+AOSP…

项目启动|鑫泓佳电子牵手盘古信息,迈向数字化转型新征程

随着科技的迅猛发展和数智化浪潮的推进&#xff0c;电子行业正经历着一场前所未有的深刻变革。在这场变革中&#xff0c;深圳市鑫泓佳电子有限公司&#xff08;以下简称“鑫泓佳电子”&#xff09;凭借其敏锐的市场洞察力和前瞻性的战略规划&#xff0c;一直保持在行业的前列。…

46-4 等级保护 - 网络安全等级保护概述

一、网络安全等级保护概述 原文:没有网络安全就没有国家安全 二、网络安全法 - 安全立法 中华人民共和国主席令 第五十三号 《中华人民共和国网络安全法》已于2016年11月7日由中华人民共和国第十二届全国人民代表大会常务委员会第二十四次会议通过,并自2017年6月1日起正式…

MES系统助力制造业数字化转型

一、MES系统的定义和功能 MES&#xff08;Manufacturing Execution System&#xff09;即制造执行系统&#xff0c;是一种可层级化管理生产活动的软件系统。它可以实现对生产过程全面的监控、调度、控制和优化&#xff0c;提高生产的效率、质量和安全性。MES系统具有以下几个主…

图像生成新篇章:Stable Diffusion 3 Medium开源评析

摘要 在数字艺术与人工智能的交汇点上&#xff0c;Stable Diffusion 3&#xff08;SD3&#xff09;的开源无疑是一场技术革新的盛宴。就在3月份&#xff0c;我撰写了一篇博文&#xff0c;深入探讨了SD3的技术报告内容与介绍&#xff0c;文章发表在CSDN博客上&#xff0c;https:…

汽车EDI:BRP EDI项目案例

项目背景 BRP Inc.使用EDI&#xff08;电子数据交换&#xff09;来处理其与供应商、客户和合作伙伴之间的业务交流。通过EDI&#xff0c;BRP可以在各种业务流程中自动化数据交换&#xff0c;例如采购订单、发货通知、发票、付款和库存信息等&#xff0c;从而提高操作效率、降低…

【RAG】RAG性能提升之路-RAPTOR:一种构建递归文档树的增强检索方法

背景 检索增强型语言模型&#xff08;RALMs&#xff09;在处理需要不断更新的知识和大量信息的文档时确实展现出了优势。然而&#xff0c;现有的方法在处理长篇文档时存在局限性&#xff0c;主要是因为它们通常只能检索较短的文本片段&#xff0c;这限制了对整体文档上下文的全…

云原生应用开发培训,开启云计算时代的新征程

在云计算时代&#xff0c;云原生应用开发技术已经成为IT领域的热门话题。如果您想要转型至云原生领域&#xff0c;我们的云原生应用开发培训将帮助您开启新征程。 我们的课程内容涵盖了云原生技术的基础概念、容器技术、微服务架构、持续集成与持续发布&#xff08;CI/CD&#…

22 CRT工具安装流程

22 CRT工具安装流程 SecureCRT 9.5 说明书 SecureCRT 9.5是一款由VanDyke Software开发的终端仿真程序。它为Windows、Mac和Linux操作系统提供了强大的SSH&#xff08;Secure Shell&#xff09;客户端功能。SecureCRT 9.5提供了对Telnet、RLogin、Serial和X.509等协议的支持&…

域内攻击 ----> DCSync

其实严格意义上来说DCSync这个技术&#xff0c;并不是一种横向得技术&#xff0c;而是更偏向于权限维持吧&#xff01; 但是其实也是可以用来横向&#xff08;配合NTLM Realy&#xff09;&#xff0c;如果不牵强说得话&#xff01; 那么下面&#xff0c;我们就来看看这个DCSyn…

SAP Web IDE 安装使用

For training SAP Web IDE 是基于 Eclipse 内核的在线开发 IDE&#xff0c;可以使用在线的试用版本&#xff0c;但服务器在德国&#xff0c;访问的网速特别慢。也可以使用 Personal Edition&#xff0c;在本机启动和编写代码。 打开官网下载WEBIDE工具包&#xff0c;包含 Tri…

CP AUTOSAR标准中文文档链接索引(更新中)

AUTOSAR标准的核心组件包括通信、诊断、安全等&#xff0c;这些组件通过模块化结构进行组织。系统被划分为多个模块&#xff0c;每个模块负责特定的功能。模块之间通过接口进行通信&#xff0c;接口定义了模块之间的交互规则。AUTOSAR标准支持模块的配置&#xff0c;可以根据不…