滑动解锁后出现登录信息框

src/app/auth/login/login.component.html

@@ -10,8 +10,9 @@
       <div id="dragContainer" class="dragContainer" #dragContainer>
         <div id="dragBg"></div>
         <div id="dragText"></div>
-        <div id="dragHandler" class="dragHandlerBg slideController"></div>
+        <div id="dragHandler" class="dragHandlerBg slideController" #dragHandler></div>
       </div>
+      <div *ngIf="isVertifySucc == true" style="color: red;text-align: center;margin-top: 25px;">请先滑动解锁后再登录</div>
       <div class="weui-cells__group weui-cells__group_form" *ngIf="isVertifySucc == false">
         <div class="weui-cells weui-cells_form">
           <div class="weui-cell" style="padding:10px 0px">

src/app/auth/login/login.component.ts

@@ -10,6 +10,7 @@ import { LifeCommonService } from '../../common/life-common.service';
 })
 export class LoginComponent implements OnInit, OnDestroy {
   @ViewChild('dragContainer') dragContainer: ElementRef;
+  @ViewChild('dragHandler') dragHandler: ElementRef;
   MOBILE_REGEXP = /^(1)\d{10}$/;
   sendCodeHtml: string = '获取验证码';
   timer: any;
@@ -24,7 +25,6 @@ export class LoginComponent implements OnInit, OnDestroy {
   redirect: any;
   dragBg:any;
   dragText:any;
-  dragHandler:any;
   maxHandlerOffset:any;
   isVertifySucc:boolean = true;
   left:any;
@@ -57,9 +57,9 @@ export class LoginComponent implements OnInit, OnDestroy {
     // //获取滑动验证容器文本
     this.dragText = document.getElementById("dragText");
     // //获取滑块
-    this.dragHandler = document.getElementsByClassName("slideController")[0];
+    // this.dragHandler.nativeElement = document.getElementsByClassName("slideController")[0];
     // //滑块的最大偏移量                 =     滑动验证容器文本长度                  -      滑块长度
-    this.maxHandlerOffset = this.dragContainer.nativeElement.clientWidth - this.dragHandler.clientWidth;
+    this.maxHandlerOffset = this.dragContainer.nativeElement.clientWidth - this.dragHandler.nativeElement.clientWidth;
     this.initDrag();
     this.len = (window.innerWidth-document.body.clientWidth)/2;
 
@@ -197,11 +197,11 @@ export class LoginComponent implements OnInit, OnDestroy {
     this.dragText.textContent = "拖动滑块验证";
     //给滑块添加鼠标按下监听
     if(this.deviceType == 2 || this.deviceType == 3){
-      this.dragHandler.addEventListener("touchstart", ()=>{
+      this.dragHandler.nativeElement.addEventListener("touchstart", ()=>{
         this.onDragHandlerMouseDown()
       },false);
     }else{
-      this.dragHandler.addEventListener("mousedown", ()=>{
+      this.dragHandler.nativeElement.addEventListener("mousedown", ()=>{
         this.onDragHandlerMouseDown()
       });
     }
@@ -222,13 +222,13 @@ export class LoginComponent implements OnInit, OnDestroy {
       }else{
         document.querySelector('#dragHandler').classList.add('slideController');
          //获取滑块
-        this.dragHandler = document.getElementsByClassName("slideController")[0];
+        this.dragHandler.nativeElement = document.getElementsByClassName("slideController")[0];
           //鼠标移动监听
-        this.dragHandler.addEventListener("mousemove",(e)=>{
+        this.dragHandler.nativeElement.addEventListener("mousemove",(e)=>{
           this.onDragHandlerMouseMove(e);
         });
         //鼠标松开监听
-        this.dragHandler.addEventListener("mouseup", ()=>{this.onDragHandlerMouseUp});
+        this.dragHandler.nativeElement.addEventListener("mouseup", ()=>{this.onDragHandlerMouseUp});
       }
 
   }
@@ -248,12 +248,12 @@ export class LoginComponent implements OnInit, OnDestroy {
       */
       //滑块移动量
       if(this.deviceType == 2 || this.deviceType == 3){
-        this.left = touch.clientX - this.dragHandler.clientWidth / 2;
+        this.left = touch.clientX - this.dragHandler.nativeElement.clientWidth / 2;
       }else{
          //获取滑块
-        this.dragHandler = document.getElementsByClassName("slideController")[0];
-        if(this.dragHandler){
-          this.left = touch.clientX - this.dragHandler.clientWidth / 2 - this.len;
+        this.dragHandler.nativeElement = document.getElementsByClassName("slideController")[0];
+        if(this.dragHandler.nativeElement){
+          this.left = touch.clientX - this.dragHandler.nativeElement.clientWidth / 2 - this.len;
         }else{
           this.left = 0;
         }
@@ -266,11 +266,11 @@ export class LoginComponent implements OnInit, OnDestroy {
           this.left = this.maxHandlerOffset;
           this.verifySucc();
       }
-      if(this.dragHandler){
+      if(this.dragHandler.nativeElement){
         //滑块移动量
-        this.dragHandler.style.left = this.left + "px";
+        this.dragHandler.nativeElement.style.left = this.left + "px";
         //绿色背景的长度
-        this.dragBg.style.width = this.dragHandler.style.left;
+        this.dragBg.style.width = this.dragHandler.nativeElement.style.left;
       }
   }
 
@@ -283,14 +283,14 @@ export class LoginComponent implements OnInit, OnDestroy {
         document.removeEventListener("touchend", this.onDragHandlerMouseUp);
       }else{
          //移除鼠标移动监听
-         this.dragHandler.removeEventListener("mousemove", this.onDragHandlerMouseMove);
+         document.removeEventListener("mousemove", this.onDragHandlerMouseMove);
          //移除鼠标松开监听
-         this.dragHandler.removeEventListener("mouseup", this.onDragHandlerMouseUp);
+         document.removeEventListener("mouseup", this.onDragHandlerMouseUp);
          document.querySelector('#dragHandler').classList.remove('slideController');
       }
       if(this.isVertifySucc){
         //初始化滑块移动量
-        this.dragHandler.style.left = 0;
+        this.dragHandler.nativeElement.style.left = 0;
         //初始化绿色背景
         this.dragBg.style.width = 0;
       }
@@ -301,15 +301,15 @@ export class LoginComponent implements OnInit, OnDestroy {
       this.isVertifySucc = false;
       this.dragText.textContent = "验证通过";
       this.dragText.style.color = "white";
-      this.dragHandler.setAttribute("class", "dragHandlerOkBg");
+      this.dragHandler.nativeElement.setAttribute("class", "dragHandlerOkBg");
       if(this.deviceType == 2 || this.deviceType == 3){
-        this.dragHandler.removeEventListener("touchstart", this.onDragHandlerMouseDown);
+        this.dragHandler.nativeElement.removeEventListener("touchstart", this.onDragHandlerMouseDown);
         document.removeEventListener("touchmove", this.onDragHandlerMouseMove);
         document.removeEventListener("touchend", this.onDragHandlerMouseUp);
       }else{
-        this.dragHandler.removeEventListener("mousedown", this.onDragHandlerMouseDown);
-        this.dragHandler.removeEventListener("mousemove", this.onDragHandlerMouseMove);
-        this.dragHandler.removeEventListener("mouseup", this.onDragHandlerMouseUp);
+        this.dragHandler.nativeElement.removeEventListener("mousedown", this.onDragHandlerMouseDown);
+        this.dragHandler.nativeElement.removeEventListener("mousemove", this.onDragHandlerMouseMove);
+        this.dragHandler.nativeElement.removeEventListener("mouseup", this.onDragHandlerMouseUp);
       }
       setTimeout(()=>{
         this.dragContainer.nativeElement.style.display = 'none'