滑块验证优化

src/views/login/JcRange.vue

@@ -10,9 +10,9 @@
 export default {
   props: {
     // 成功之后的函数
-    successFun: {
-      type: Function
-    },
+    // successFun: {
+    //   type: Function
+    // },
     //成功图标
     successIcon: {
       type: String,
@@ -34,9 +34,9 @@ export default {
       default: "拖动滑块到最右边"
     },
     //失败之后的函数
-    errorFun: {
-      type: Function
-    },
+    // errorFun: {
+    //   type: Function
+    // },
     //或者用值来进行监听
     status: {
       type: String
@@ -75,21 +75,21 @@ export default {
 			document.onmouseup = ()=> {
 				
 				if(this.disX !== MaxX){
-					alert('fail')
 					ele.style.transition = '.5s all';
 					ele.style.transform = 'translateX(0)';
 					this.rangeStatus = false;
 					//执行失败的函数
-					
-					this.errorFun && this.errorFun();
+
+					 this.$emit('errorFun')
+					// this.errorFun && this.errorFun();
 				}else{
-					// alert('succc')
 					this.rangeStatus = true;
 					if(this.status){
 						this.$parent[this.status] = true;
 					}
 					//执行成功的函数
-					this.successFun && this.successFun();
+					this.$emit('successFun')
+					// this.successFun && this.successFun();
 				}
 				document.onmousemove = null;
 				document.onmouseup = null;

src/views/login/index.vue

@@ -29,8 +29,8 @@
             <a-form-item>
               <JcRange
               :status="status"
-                :successFun="onSuccess()"
-                :errorFun="onError()"
+                @successFun="onSuccess()"
+                @errorFun="onError()"
               ></JcRange>
             </a-form-item>
 
@@ -38,7 +38,7 @@
               <a-button
                 type="primary"
                 html-type="submit"
-                :disabled="form.username === '' || form.password === ''"
+                :disabled="form.username === '' || form.password === ''||status==false"
               >
                 登录
               </a-button>
@@ -61,7 +61,6 @@ import { useRouter } from 'vue-router'
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 
 import JcRange from './JcRange.vue'
-// import { ElMessage } from 'element-plus'
 
 export default {
   name: 'Login',
@@ -126,17 +125,8 @@ export default {
     },
 
     async handleSubmit() {
-       await this.login(this.form)
+      await this.login(this.form)
         await this.$router.push(this.handleRoute())
-      // if (this.status) {
-      //   await this.login(this.form)
-      //   await this.$router.push(this.handleRoute())
-      // } else {
-      //   ElMessage({
-      //     message: '请先滑块验证',
-      //     type: 'warning',
-      //   })
-      // }
     },
   },
 }