详解Vue如何实现字母验证码

<template>
  <div class="captcha">
    <div class="code" v-html="code"></div>
    <button class="refresh" @click="refreshCode">刷新</button>
    <input class="input" type="text" v-model="inputCode" />
    <button class="submit" @click="submitCode">提交</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      code: '',
      inputCode: '',
    };
  },
  methods: {
    // 生成随机字母验证码
    generateCode(length) {
      let result = '';
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      this.code = result;
    },
    // 刷新验证码
    refreshCode() {
      this.generateCode(4);
    },
    // 提交验证码
    submitCode() {
      if (this.inputCode === this.code) {
        alert('验证成功！');
      } else {
        alert('验证码错误，请重新输入！');
      }
    },
  },
  mounted() {
    this.generateCode(4);
  },
};
</script>
<style scoped>
.captcha {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.code {
  margin-top: 20px;
  font-size: 30px;
  font-weight: bold;
}
.refresh,
.submit {
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 2px;
  border: none;
  color: #fff;
  background-color: #409eff;
  cursor: pointer;
}
.refresh:hover,
.submit:hover {
  background-color: #66b1ff;
}
.input {
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
}
</style>

// 生成随机字母验证码
generateCode(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  this.code = result;
},

// 刷新验证码
refreshCode() {
  this.generateCode(4);
},

// 提交验证码
submitCode() {
  if (this.inputCode === this.code) {
    alert('验证成功！');
  } else {
    alert('验证码错误，请重新输入！');
  }
},

<template>
  <div>
    <captcha />
  </div>
</template>
<script>
import Captcha from '@/components/Captcha.vue';
export default {
  components: {
    Captcha,
  },
};
</script>