sf-verify3

基于 Vue 3 的验证码组件库，支持滑块、点选等多种验证方式。

特性

• 🚀 基于 Vue 3 开发，支持组合式 API
• 🎯 支持多种验证码类型：滑块、点选等
• 💪 支持弹窗和固定两种显示模式
• 🎨 可自定义样式和尺寸
• 📦 支持按需引入
• 🔒 内置防刷机制
• 🌐 支持服务端验证

安装

# npm
npm install sf-verify3 --save

# yarn
yarn add sf-verify3

# pnpm
pnpm add sf-verify3

如果遇到依赖冲突，可以尝试以下方式安装：

# npm
npm install sf-verify3 --legacy-peer-deps

# pnpm
pnpm add sf-verify3 --force

快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import SfVerify3 from 'sf-verify3'

const app = createApp(App)
app.use(SfVerify3)
app.mount('#app')

按需引入

import { SfVerify3 } from 'sf-verify3'

使用指南

基础用法

<template>
  <div>
    <button @click="showVerify">点击验证</button>
    <SfVerify3
      ref="verifyRef"
      :captchaType="'blockPuzzle'"
      :mode="'pop'"
      :imgSize="{width:'330px',height:'155px'}"
      :reqGet="customReqGet"
      :reqCheck="customReqCheck"
      @success="onSuccess"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Verify } from 'sf-verify3'

const verifyRef = ref(null)
// pop  模式下，点击按钮显示验证码
const showVerify = () => {
  verifyRef.value.show()
}

const customReqGet = async (data: any) => {
  // 获取验证码
  return reqGet(data).then((res) => {
    if (res.repCode == '0000') {
      res.repCode = '0000'
      return res
    }
  })
}

const customReqCheck = async (data: any) => {
  // 校验验证码
  return reqCheck(data).then((res) => {
    console.log(res)
    return res
  })
}
// 验证码成功回调
const onSuccess = (result) => {
  console.log('验证成功:', result)
  // 处理验证成功后的逻辑
}

</script>

属性说明

| 属性名 | 类型 | 必填 | 默认值 | 说明 | |--------|------|------|--------|------| | captchaType | String | 是 | - | 验证码类型，支持 'blockPuzzle'（滑块）、'clickWord'（点选）等 | | mode | String | 否 | 'pop' | 显示模式，支持 'pop'（弹窗）、'fixed'（固定） | | imgSize | Object | 否 | {width:'330px',height:'155px'} | 验证码图片尺寸 | | reqGet | Function | 是 | - | 获取验证码的方法 | | reqCheck | Function | 是 | - | 校验验证码的方法 | | theme | String | 否 | 'light' | 主题，支持 'light'、'dark' | | lang | String | 否 | 'zh-CN' | 语言，支持 'zh-CN'、'en-US' | | maxRetry | Number | 否 | 3 | 最大重试次数 | | showClose | Boolean | 否 | true | 是否显示关闭按钮 | | showRefresh | Boolean | 否 | true | 是否显示刷新按钮 |

事件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | success | 验证成功时触发 | (result: Object) 验证结果 | | fail | 验证失败时触发 | (error: Object) 错误信息 | | close | 关闭验证码时触发 | - | | refresh | 刷新验证码时触发 | - | | retry | 重试验证码时触发 | (count: Number) 当前重试次数 |

方法

| 方法名 | 说明 | 参数 | |--------|------|------| | show | 显示验证码 | - | | hide | 隐藏验证码 | - | | refresh | 刷新验证码 | - | | reset | 重置验证码 | - |

服务端接口说明

参考https://github.com/anji-plus/captcha

校验验证码

版本要求

• Vue >= 3.0.0
• Node >= 14.0.0

常见问题

1. 如果遇到依赖冲突，请尝试使用 --legacy-peer-deps 或 --force 参数安装
2. 确保项目中使用的 Vue 版本与插件兼容（Vue 3.x）
3. 如果使用 TypeScript，请确保 tsconfig.json 中包含了正确的类型声明
4. 如果验证码图片加载失败，请检查网络请求和后端接口是否正常
5. 如果验证码校验失败，请检查请求参数格式是否正确

注意事项

• 本插件仅支持 Vue 3，如果需要 Vue 2 版本，请使用 sf-verify2
• 建议使用 npm 或 pnpm 进行包管理
• 如果遇到构建问题，请确保已安装所有必要的开发依赖
• 在生产环境中，请确保验证码接口的安全性
• 建议在服务端实现防刷机制，限制验证码请求频率

贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。

许可证

MIT