vue验证码组件

<template>
  <div class="captcha-container">
    <span @click="refreshCaptcha" class="captcha-text">{{ captchaCode }}</span>
    <button @click="verifyCaptcha">验证</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      captchaCode: '',
      correctCode: ''
    };
  },
  methods: {
    generateCaptcha() {
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let code = '';
      for (let i = 0; i < 6; i++) {
        code += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      this.correctCode = code;
      this.captchaCode = code;
    },
    refreshCaptcha() {
      this.generateCaptcha();
    },
    verifyCaptcha() {
      // 这里可以添加用户输入的验证码验证逻辑
      console.log('验证验证码:', this.correctCode);
    }
  },
  mounted() {
    this.generateCaptcha();
  }
};
</script>

<style scoped>
.captcha-container {
  display: flex;
  align-items: center;
}

.captcha-text {
  font-size: 18px;
  margin-right: 10px;
  cursor: pointer;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 包含一个 div 容器，用于显示验证码文本和按钮。
   • @click="refreshCaptcha"：点击验证码文本时刷新验证码。
   • @click="verifyCaptcha"：点击按钮时调用验证方法。

2. 脚本部分 (<script>):

   • data()：定义了两个数据属性 captchaCode 和 correctCode，分别用于显示和存储正确的验证码。
   • methods：
     • generateCaptcha()：生成随机的6位验证码，并更新到 captchaCode 和 correctCode。
     • refreshCaptcha()：调用 generateCaptcha() 刷新验证码。
     • verifyCaptcha()：验证用户输入的验证码（此处仅打印正确验证码到控制台，实际使用时需要添加用户输入的验证逻辑）。
   • mounted()：组件挂载时生成初始验证码。

3. 样式部分 (<style scoped>):

   • 简单的样式设置，使验证码文本和按钮在页面上居中对齐，并且验证码文本可以点击刷新。