sf-verify2

一个功能强大的 Vue2 验证码组件库，提供多种验证方式，帮助开发者轻松实现网站安全验证功能。

主要特点

• 基于 Vue2 开发，兼容 Vue 2.0.0 及以上版本
• 支持多种验证方式：
  • 滑块验证
  • 点选验证
  • 更多验证方式持续开发中
• 轻量级设计，易于集成
• 提供完整的 TypeScript 类型支持
• 支持按需引入，优化打包体积

安装

npm install sf-verify2

快速开始

全局注册

import Vue from 'vue'
import SfVerify2 from 'sf-verify2'

Vue.use(SfVerify2)

按需引入

import { SfVerify2 } from 'sf-verify2'

export default {
  components: {
    SfVerify2
  }
}

使用示例

<template>
  <SfVerify2
        ref="verify"
        :captchaType="'blockPuzzle'"
        :mode="'pop'"
        :imgSize="{width:'330px',height:'155px'}"
        :reqGet="customReqGet"
        :reqCheck="customReqCheck"
        @success="onSuccess"
      />
      <button @click="handleGetCode" class="verify-btn">获取验证码</button>
</template>

<script>
export default {
  methods: {
    onSuccess() {
      console.log('验证成功')
    },
    // pop  模式下，点击按钮显示验证码
      handleGetCode() {
      this.$refs.verify.show()
    },
    //  获取验证码信息 
     customReqGet(data) {
      return reqGet(data).then(res => {
        //接口成功获取数据仅支持repCode值为'0000'如果其它需要自定义添加repCode='0000' 
        if (res.repCode === '0000') {
          return res
        }
        return Promise.reject(new Error('获取验证码失败'))
      })
    },
    customReqCheck(data) {
      return reqCheck(data).then(res => {
        //接口成功获取数据仅支持repCode值为'0000'如果其它需要自定义添加repCode='0000' 
        console.log('验证结果:', res)
        return res
      })
    }
  }
}
</script>

API

服务端接口说明

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

Props

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | type | String | 'slide' | 验证类型，可选值：'slide'、'point' | | width | Number | 320 | 验证码组件宽度 | | height | Number | 160 | 验证码组件高度 | | theme | String | 'light' | 主题，可选值：'light'、'dark' |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | success | 验证成功时触发 | - | | fail | 验证失败时触发 | - |

开发计划

• [ ] 添加更多验证方式
• [ ] 优化移动端体验
• [ ] 提供更多自定义配置选项
• [ ] 完善文档和示例

贡献指南

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

许可证

MIT License