Vue3-滑动到最右验证功能

1、思路

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

2、效果图

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

2、成分分析

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

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

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

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

3、事件分析

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

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

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

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

4、效果图

5、代码

1、SlideVerify.vue文件

javascript 复制代码
<template>
  <div
    ref="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、调用代码

javascript 复制代码
<slide-verify @success="onVerifySuccess" @failed="onVerifyFailed" />
相关推荐
dy171742 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5