pc端vue登陆页面加前端数字验证

<template>
  <div class="login-container">
      <!--<p>首页</p>-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px" class="login-main">
      <h3 class="title">恒蚨建筑后台登录</h3>
      <el-form-item prop="account">
        <el-input type="text" v-model="ruleForm.account" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码" show-password></el-input>
      </el-form-item>
      <!--验证码-->
      <el-form-item prop="VerificationCode" style="width: 245px;display: inline-block;">
        <el-input type="text" v-model="ruleForm.VerificationCode" auto-complete="off" placeholder="验证码"></el-input>
      </el-form-item>
      <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode" style="border: 1px solid #DCDFE6;float: right;border-radius: 4px;">
    <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
  </div>
          <el-checkbox v-model="checked" style="float: left;">记住尼玛</el-checkbox>
      <router-link to="/About" style="margin-left: 180px;text-decoration: none;color: #606266;font-size: 12px;">忘记密码</router-link>
      <el-form-item class="btn-box" style="margin-top: 20px;">
        <el-button type="primary" @click="submitLogin('ruleForm')"style="width: 270px;">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
      <a href="" style="">还没有账户？立即注册</a>
    </el-form>
  </div>
</template>

<script>
export default {
     props: {
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '38px'
    },
    length: {
      type: Number,
      default: 4
    }
  },
  data () {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'));
        } else if (value !== this.codeList.map(item => item.code).join('')) {
          callback(new Error('请输入正确的验证码!'));
        } else {
          callback();
        }
        }
    return {
        codeList: [],
      ruleForm: {
        account: '',
        password: '',
        VerificationCode:""
      },
      checked:true,
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        VerificationCode:[
            { validator: validatePass2, trigger: 'blur' }
          ],
      }
    }
  },
  mounted () {
    this.createdCode()
  },
  methods: {
      
    refreshCode () {
      this.createdCode()
    },
    createdCode () {
      let len = this.length,
        codeList = [],
        chars = 'ABCDEFGHJKMNPQRSTWXYZ0123456789',
        charsLen = chars.length
      // 生成
      for (let i = 0; i < len; i++) {
        let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb})`,
          fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
        })
      }
      // 指向
      this.codeList = codeList
      // 将当前数据派发出去
      this.$emit('update:value', codeList.map(item => item.code).join(''))
      console.log(codeList.map(item => item.code).join(''))
    },
    getStyle (data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
    },
  
    submitLogin (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: '登陆成功',
            type: 'success',
            duration: 2000
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
    body {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  -o-user-select:none;
  user-select: none;
}
    .ValidCode{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    span{
      display: inline-block;
    }
  }
.login-container{width: 100vw; height: 100vh;background-image:url('../assets/images/login_bg.png'); background-size: cover; overflow: hidden;}
.login-main{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-clip: padding-box; margin: 280px auto; width: 350px; padding: 35px 35px 15px; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6;}
    h3{text-align: center;}
   .btn-box{text-align: center;}
</style>