vue登录滑动动画验证框

登录前的预校验是为了避免恶意频繁登录造成的服务器资源大量被占用的情况

HTML

<!-- 滑动窗口验证 对话框 -->
<div class="slideShadow" v-show="showSlide">
  <transition>
    <div class="slideSty animated bounce">
      <slide-verify
        @success="onSuccess"
        @fail="onFail"
        :sliderText="text"
        :w="350"
        :h="175"
        ref="slideDiv"
      ></slide-verify>
      <div class="iconBtn">
        <i class="el-icon-circle-close" @click="showSlide = false"></i
        ><i class="el-icon-refresh" @click="refresh"></i>
      </div>
    </div>
  </transition>
</div>

登录对话框----关键在于登录按钮

<el-form
ref="loginForm"
 :model="loginForm"
 :rules="loginRules"
 class="demo-ruleForm"
 auto-complete="on"
>
   <el-form-item class="items item">
     <img src=