登录页:滑动验证加载以及监听处理

src/views/home/login_v1.vue

@@ -92,7 +92,6 @@
               <el-form-item style="margin-top: 25px" label="" prop="password">
                 <!--  @keyup.enter.native="loginFn" -->
                 <el-input
-                  @change="onChange2"
                   v-model="form.password"
                   style="height: 53px; font-size: 16px"
                   type="password"
@@ -212,6 +211,7 @@
             :r="10"
             :w="330"
             :h="175"
+            :imgs="imageList"
             slider-text="向右滑动滑块填充拼图"
             ref="slideverify"
             @success="onSuccess"
@@ -260,10 +260,11 @@ export default {
   data() {
     return {
       msg: '',
+      oldVal:'',
       show: false,
-      showVerify:false,
-      verificateBtn:false,//验证按钮
-      pass:true,
+      showVerify:false, // 滑动验证
+      verificateBtn:false, //验证按钮
+      pass:true, // 登录按钮
       input: "",
       radio: "",
       projectType: "",
@@ -316,6 +317,13 @@ export default {
         platformLogo: "",
         platformName: "",
       },
+      imageList:[
+        require('../../assets/images/login/Rectangle 381.jpg'),
+        require('../../assets/images/login/Rectangle 382.jpg'),
+        require('../../assets/images/login/Rectangle 383.jpg'),
+        require('../../assets/images/login/Rectangle 384.jpg'),
+        require('../../assets/images/login/Rectangle 385.jpg'),
+      ]
     };
   },
   watch: {
@@ -327,7 +335,19 @@ export default {
       } else {
         window._paq.push(["trackEvent", "点击", "登录", "使用账号登录"]);
       }
-    }
+    },
+    // oldVal:{
+    //   handler(n,o){
+    //     console.log(n,o);
+    //       if(n!= o){
+    //       console.log('====监听不一样')
+    //       this.showVerify = true,
+    //       this.pass = false
+    //      }
+    //   },
+    //   deep:true,
+    //   immediate:false
+    // }
   },
   created() {
     this.company = COMPANY;
@@ -369,35 +389,28 @@ export default {
     }
   },
   methods: {
-      onChange1(e){
-        if(e!=this.form.account){
-          // this.verificateBtn = false
-          // this.showVerify = true
-        }
-      },
-      onChange2(e){
-        if(e!=this.form.password){
-          // this.verificateBtn = false
-          // this.showVerify = true
-        }
+      onChange1(val){
+       if(this.oldVal != ''){
+        if(this.oldVal != this.form){
+          this.verificateBtn = false,
+          this.pass = true
+         }
+       }
       },
       onReset() {
         //重置图片验证组件
        this.$refs.slideverify.reset();
       },
       onSuccess(){
-        setTimeout(()=>{
-          this.showVerify = false
-          this.verificateBtn = true
-          this.pass = false
-         },100)
-        },
+        this.oldVal = this.form.account
+        this.verificateBtn = true
+        this.showVerify = false
+        this.pass = false
+      },
         onFail(){
           this.msg = '验证失败'
         },
-        onRefresh(){
-            this.msg = ''
-        },
+        onRefresh(){},
     getData() {
       getOneComputerAuthApi().then((res) => {
         if (res.result) {
@@ -431,7 +444,7 @@ export default {
     goSignIn() {
       this.$router.push({ path: "/sign" });
     },
-    // 验证
+    // 立即验证
     verificateFn(){
       this.showVerify = true
       // this.$bus.$emit('resetSlideVerify')