Vue项目中手搓滑动校验模块-demo

实现代码

SliderCheck.vue

<template><div class="drag" ref="dragDiv"><div class="drag_bg" ref="dragBg"></div><div class="drag_text" ref="dragText">{{ confirmWords }}</div><divref="moveDiv"@mousedown="mouseDownFn($event)"@touchstart="touchStartFn($event)":class="{ handler_ok_bg: confirmSuccess }"class="handler handler_bg flx-center"style="position: absolute; top: -1px; left: -1px"><icon-arrow-right class="base-icon"></icon-arrow-right></div></div>
</template><script setup lang="ts">
// 距离屏幕左端距离
const beginClientX = ref(0)
// 触发拖动状态  判断
const mouseMoveState = ref(false)
// 拖动最大宽度，依据滑块宽度算出来的
const maxWidth = ref("")
// 滑块文字
const confirmWords = ref("请按住滑块，拖动到最右边")
// 验证成功判断
const confirmSuccess = ref(false)
const dragDiv = ref(null)
const dragBg = ref(null)
const dragText = ref(null)
const moveDiv = ref(null)const emit = defineEmits(["status-changed"])// 验证成功函数
const successFunction = () => {confirmSuccess.value = trueconfirmWords.value = "验证通过"// 移除事件监听document.getElementsByTagName("html")[0].removeEventListener("mousemove", mouseMoveFn)document.getElementsByTagName("html")[0].removeEventListener("mouseup", moseUpFn)document.getElementsByTagName("html")[0].removeEventListener("touchmove", touchMoveFn)document.getElementsByTagName("html")[0].removeEventListener("touchend", touchEndFn);(dragText.value as any)!.style.color = "#fff";(moveDiv.value as any).style.left = `${maxWidth.value}px`;(dragBg.value as any).style.width = `${maxWidth.value}px`emit("status-changed", "success")
}// mouse事件 鼠标按下 开始
const mouseDownFn = (e: any) => {if (!confirmSuccess.value) {e.preventDefault && e.preventDefault() // 阻止文字选中等 浏览器默认事件mouseMoveState.value = truebeginClientX.value = e.clientX}
}// mousemove事件 移动
const mouseMoveFn = (e: any) => {if (mouseMoveState.value) {let width = e.clientX - beginClientX.valueif (width > 0 && width <= Number(maxWidth.value)) {;(moveDiv.value as any).style.left = `${width}px`;(dragBg.value as any).style.width = `${width}px`} else if (width > Number(maxWidth.value)) {successFunction()}}
}
// mouseup事件 结束
const moseUpFn = (e: any) => {mouseMoveState.value = falseconst width = e.clientX - beginClientX.valueif (width < Number(maxWidth.value)) {;(moveDiv.value as any).style.left = `${0}px`;(dragBg.value as any).style.width = `${0}px`}
}// =====================兼容移动端移动事件=============================
// touch事件 按下 开始
const touchStartFn = (e: TouchEvent) => {if (!confirmSuccess.value) {e.preventDefault()mouseMoveState.value = truebeginClientX.value = e.touches[0].clientX}
}
// touch事件 移动
const touchMoveFn = (e: TouchEvent) => {if (mouseMoveState.value) {let width = e.touches[0].clientX - beginClientX.valueif (width > 0 && width <= Number(maxWidth.value)) {;(moveDiv.value as any).style.left = `${width}px`;(dragBg.value as any).style.width = `${width}px`} else if (width > Number(maxWidth.value)) {successFunction()}}
}
// touch事件 结束
const touchEndFn = (e: TouchEvent) => {mouseMoveState.value = falseconst width = e.changedTouches[0].clientX - beginClientX.valueif (width < Number(maxWidth.value)) {;(moveDiv.value as any).style.left = `${0}px`;(dragBg.value as any).style.width = `${0}px`}
}
// =====================兼容移动端移动事件end=============================onMounted(() => {maxWidth.value = String((dragDiv.value as any)!.clientWidth - (moveDiv.value as any)!.clientWidth - 1)document.getElementsByTagName("html")[0].addEventListener("mousemove", mouseMoveFn)document.getElementsByTagName("html")[0].addEventListener("mouseup", moseUpFn)document.getElementsByTagName("html")[0].addEventListener("touchmove", touchMoveFn)document.getElementsByTagName("html")[0].addEventListener("touchend", touchEndFn)
})
</script>
<style scoped>
.drag {position: relative;box-sizing: border-box;width: 100%;height: 39px;line-height: 38px;text-align: center;background-color: rgb(204 204 204 / 20%);border: 1px solid #cccccc;border-radius: 4px;
}
.handler {box-sizing: border-box;width: 46px;height: 38px;cursor: move;border: 1px solid #cccccc;border-radius: 4px;
}
.handler_bg {background: #ffffff;
}
.handler_ok_bg {background: #ffffff;border-top-left-radius: 0;border-bottom-left-radius: 0;
}
.drag_bg {width: 0;height: 38px;background-color: #0cc399;border-radius: 4px 0 0 4px;
}
.drag_text {position: absolute;top: 0;width: 100%;font-size: var(--el-font-size-base);font-weight: 400;color: var(--el-color-info-light-3);text-align: center;user-select: none;
}
</style>

使用

<template><a-form class="large-form"><a-form-item><SliderCheck ref="sliderCheckRef" @status-changed="changeSliderStatus"></SliderCheck></a-form-item></a-form>
</template><script setup lang="ts">
const sliderCheckRef = ref()
const isValidated = ref(false)
const asyncPhoneIsValid = ref(false)
const changeSliderStatus = async (status: string) => {isValidated.value = status === "success"try {asyncPhoneIsValid.value = validateInfos.mobile.validateStatus === "success"} catch (err: any) {asyncPhoneIsValid.value = false}
}
</script><style lang="scss" scoped>
</style>