VUE3+ts实现滑块验证

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;