vue3 实现验证码功能

在 Vue3 中实现验证码功能，可以使用第三方库或者自己实现。以下是使用第三方库 `vue-verify-pop` 实现验证码功能的示例代码：

1. 安装 `vue-verify-pop` 库

npm install vue-verify-pop --save

2. 在组件中引入并注册 `vue-verify-pop`

import VerifyPop from 'vue-verify-pop';

export default {
  components: {
    VerifyPop,
  },
};

3. 在模板中使用 `vue-verify-pop`

<template>
  <div>
    <verify-pop ref="verify" :codeLength="4" @success="handleSuccess">
      <button @click="openVerify">点击验证</button>
    </verify-pop>
  </div>
</template>

在上面的代码中，我们在模板中使用了 `vue-verify-pop` 组件，并设置了验证码长度为 4，当验证成功时会触发 `handleSuccess` 方法。

4. 在方法中打开验证码弹窗

methods: {
  openVerify() {
    this.$refs.verify.open();
  },
  handleSuccess() {
    // 验证成功后的操作
  },
},

在 `openVerify` 方法中，我们通过 `$refs` 获取到 `vue-verify-pop` 的实例，并调用 `open` 方法打开验证码弹窗。当验证码验证成功时，会触发 `handleSuccess` 方法。

以上就是使用 `vue-verify-pop` 库实现验证码功能的示例代码。当然，你也可以自己实现验证码功能，可以借助 Canvas 或者第三方库实现。