Эх сурвалжийг харах

更新组件说明,优化监听倒计时逻辑

zhontai 2 жил өмнө
parent
commit
739407a7d8

+ 1 - 0
src/components/my-captcha/dialog.vue

@@ -11,6 +11,7 @@ const MyCaptcha = defineAsyncComponent(() => import('./index.vue'))
 
 const myCaptchaRef = ref()
 
+//刷新滑块验证码
 const refresh = () => {
   myCaptchaRef.value?.refresh()
 }

+ 5 - 5
src/components/my-captcha/slide-captcha.vue

@@ -280,7 +280,7 @@ const removeEventListeners = () => {
   window.removeEventListener('mousemove', handleDragMoving)
   window.removeEventListener('mouseup', handleDragFinish)
 }
-
+//开始拖拽
 const handleDragStart = (e: any) => {
   if (!state.isPassing && state.src && state.sliderSrc && !state.isFinish) {
     window.addEventListener('touchmove', handleDragMoving)
@@ -295,7 +295,7 @@ const handleDragStart = (e: any) => {
     state.width = dragVerify.value.clientWidth
   }
 }
-
+//拖拽中
 const handleDragMoving = (e: any) => {
   if (state.isMoving && !state.isPassing && state.src && state.sliderSrc && !state.isFinish) {
     var _x = (e.pageX || e.touches[0].pageX) - state.x
@@ -322,7 +322,7 @@ const handleDragMoving = (e: any) => {
     }
   }
 }
-
+//拖拽结束
 const handleDragFinish = () => {
   if (state.isMoving && !state.isPassing && state.src && state.sliderSrc && !state.isFinish) {
     state.isMoving = false
@@ -343,12 +343,12 @@ const handleDragFinish = () => {
     }
   }
 }
-
+//刷新
 const handleRefresh = () => {
   reset()
   emits('refresh')
 }
-
+//导出方法
 defineExpose({
   startRequestGenerate,
   endRequestGenerate,

+ 11 - 7
src/components/my-input-code/index.vue

@@ -10,7 +10,7 @@
           :underline="false"
           v-show="state.status !== 'countdown'"
           :disabled="state.status === 'countdown'"
-          @click.prevent.stop="onClick"
+          @click.prevent.stop="onGetCode"
           >{{ text }}</el-link
         >
         <el-countdown
@@ -61,13 +61,14 @@ const props = defineProps({
 })
 
 const myCaptchaDialogRef = ref()
+const countdown = Date.now()
 
 const state = reactive({
   status: 'ready',
   startText: props.startText,
   changeText: props.changeText,
   endText: props.endText,
-  countdown: Date.now(),
+  countdown: countdown,
 
   showDialog: false,
   requestId: '',
@@ -77,23 +78,26 @@ const text = computed(() => {
   return state.status === 'ready' ? state.startText : state.endText
 })
 
+//开始倒计时
 const startCountdown = () => {
   state.status = 'countdown'
   state.countdown = Date.now() + (props.seconds + 1) * 1000
 }
 
-const onClick = () => {
+//点击获取验证码
+const onGetCode = () => {
   if (state.status !== 'countdown') {
     if (props.validate) {
-      props.validate(onGetCode)
+      props.validate(getCode)
     } else {
-      onGetCode()
+      getCode()
     }
   }
 }
 
+//监听倒计时
 const onChange = (value: number) => {
-  if (value > 0 && value < 1000) state.status = 'finish'
+  if (state.countdown != countdown && value < 1000) state.status = 'finish'
 }
 
 //验证通过 data: any
@@ -104,7 +108,7 @@ const onOk = () => {
 }
 
 //获得验证码
-const onGetCode = () => {
+const getCode = () => {
   //验证手机号
   if (!isMobile(props.mobile)) {
     ElMessage.warning({ message: '请输入正确的手机号码', grouping: true })