Vue 登录页面实现滑动验证码验证功能

<template>
  <div>
    <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="100px" class="login-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" type="password" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item v-show="isShow" label="验证码">
        <el-row>
          <el-col :span="20">
            <verification-code
              :success="success"
              :fails="fails"
              :close-re="closeRe"
              :timeout="timeout"
            ></verification-code>
          </el-col>
          <el-col :span="4">
            <el-button type="text" size="small" @click="changeCode">换一张</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import VerificationCode from '@/components/VerificationCode'

export default {
  components: {
    VerificationCode
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      isShow: false,
      verified: false,
      photoHua: 0,
      timeout: false
    }
  },
  methods: {
    success() {
      this.isShow = false
      this.$message({
        message: 'O(∩_∩)O！验证通过~',
        type: 'success'
      })
      this.verified = true
    },
    fails() {
      this.photoHua += 1
      if (this.photoHua > 5) {
        this.$message({
          message: '其实ψ(*｀ー´)ψ......你要是一直拼不成功，我会让你一直拼下去的哟...',
          type: 'warning'
        })
      }
    },
    closeRe() {
      this.$message({
        message: '请完成滑动验证，验证成功之后验证框会自动消失...(๑╹◡╹)ﾉ',
        type: 'warning'
      })
    },
    changeCode() {
      this.verified = false
    },
    handleLogin() {
      if (this.verified) {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('user/login', this.loginForm).then(() => {
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.isShow = true
        this.timeout = true
        setTimeout(() => {
          this.timeout = false
        }, 5000) // 设置超时时间为5秒
      }
    }
  }
}
</script>