VUE3+ts实现滑块验证

最新推荐文章于 2025-04-07 14:27:31 发布

我是IT小菜鸟

最新推荐文章于 2025-04-07 14:27:31 发布

阅读量1k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/z459148345/article/details/132965635

版权

VUE3+ts实现滑块验证

示例（图）：
在这里插入图片描述

需求

账号密码输入完成点击登录时需要把滑块拖到最右边完成验证才可以登录
在这里插入图片描述

在这里插入图片描述

实现思路

1.设置可以拖动的区域
2.设置拖动的滑块
3.使用mousedown方法进行获取鼠标事件
4.计算出滑块滑动比例
5.滑动到最右边提示验证成功

代码

<div class="huakuia">
      <div ref="dragDiv" class="drag" v-if="!data.confirmSuccess">
        <!-- 拖动区域 -->
        <div class="handler" :style="{ left: dragLeft + 'px' }" @mousedown="mousedownFn">>></div>
        <!-- 拖动背景 -->
        <div class="drag_bg" :style="{ width: dragLeft + 'px' }"></div>
        <div class="drag_text" :style="{ color: confirmColor }">
          {{ confirmWords }}
        </div>
      </div>
    </div>
    <div class="drag_text" v-if="data.confirmSuccess">验证通过</div>

// 滑块验证
import { ref, reactive, onMounted, onUnmounted } from "vue";

const dragDiv = ref({ clientWidth: "" as any });
console.log(dragDiv);
const moveDiv = ref({ clientWidth: "" as any });
console.log(moveDiv);

let data = reactive({
  beginClientX: 0,
  mouseMoveState: false,
  maxwidth: 0,
  confirmWords: "拖动滑块验证",
  confirmSuccess: false
});
function mousedownFn(e: MouseEvent) {
  if (!data.confirmSuccess) {
    e.preventDefault && e.preventDefault();
    data.mouseMoveState = true;
    data.beginClientX = e.clientX;
  }
}
function successFunction() {
  data.confirmSuccess = true;
  data.confirmWords = "验证通过";

  document.getElementsByTagName("html")[0].removeEventListener("mousemove", mouseMoveFn);
  document.getElementsByTagName("html")[0].removeEventListener("mouseup", mouseUpFn);
}

function mouseMoveFn(e: MouseEvent) {
  if (data.mouseMoveState) {
    const width = e.clientX - data.beginClientX;
    console.log(width, data.maxwidth);
    if (width > 0 && width <= data.maxwidth) {
      document.getElementsByClassName("handler")[0].style.left = width + "px";
      document.getElementsByClassName("drag_bg")[0].style.width = width + "px";
    } else if (width > data.maxwidth) {
      successFunction();
    }
  }
}

function mouseUpFn(e: MouseEvent) {
  data.mouseMoveState = false;
  const width = e.clientX - data.beginClientX;
  if (width < data.maxwidth) {
    document.getElementsByClassName("handler")[0].style.left = "0px";
    document.getElementsByClassName("drag_bg")[0].style.width = "0px";
  }
}

onMounted(() => {
  data.maxwidth = dragDiv.value.clientWidth - moveDiv.value.clientWidth - 40;
  if (data.maxwidth <= 0) {
    data.maxwidth = 2;
  }
  document.getElementsByTagName("html")[0].addEventListener("mousemove", mouseMoveFn);
  document.getElementsByTagName("html")[0].addEventListener("mouseup", mouseUpFn);
});

onUnmounted(() => {
  document.getElementsByTagName("html")[0].removeEventListener("mousemove", mouseMoveFn);
  document.getElementsByTagName("html")[0].removeEventListener("mouseup", mouseUpFn);
});
const dragLeft = data.confirmSuccess ? data.maxwidth : 2;

const confirmColor = data.confirmSuccess ? "#fff" : "";
let confirmWords = data.confirmWords;