vue3 纯数字验证码

Vue3纯数字验证码通常是指在Vue.js框架的最新版本（如Vue 3.x）中生成并显示一组只包含数字的随机验证码。这个验证码用于增强用户表单的安全性，防止自动化机器人恶意操作。在Vue应用中，你可以通过以下步骤创建一个简单的纯数字验证码功能：

1. 安装依赖：使用`@vue/cli`工具初始化项目后，安装`vuelidate`库来验证输入，并可能需要一个生成随机数的库，如`lodash`或`uuid`。

npm install vuelidate lodash

2. 配置Vuex：用于存储和管理全局状态，如验证码。

// store/modules/auth.js
export const state = () => ({
  captcha: '',
});
export const mutations = {
  setCaptcha(state, captcha) {
    state.captcha = captcha;
  },
};

3. 创建验证码组件：使用计算属性和事件自定义渲染验证码。

<template>
  <input type="text" v-model="captchaInput" :disabled="isLoading">
  <button @click="generateCaptcha" :disabled="isLoading">获取验证码</button>
  <div v-if="!isLoading && error">{{ errorMessage }}</div>
</template>

<script>
import { mapState } from 'vuex';
import { random } from 'lodash';

export default {
  computed: {
    ...mapState(['captcha', 'isLoading', 'errorMessage']),
    captchaInput() {
      return this.$v.captcha.$model;
    },
  },
  methods: {
    generateCaptcha() {
      if (!this.$v.captcha.$touch()) {
        // 验证码校验失败，处理错误
        this.errorMessage = '请输入正确的验证码';
      } else {
        this.isLoading = true;
        setTimeout(() => {
          this.setCaptcha(random(4)); // 示例，生成4位随机数字验证码
          this.isLoading = false;
        }, 1000);
      }
    },
  },
};
</script>