https://github.com/lirongtong/miitvip-captcha

:sparkling_heart: 基于 Vue3.x + Vite4.x + Canvas 开发的滑块验证码 :sparkling_heart: 动态生成验证滑块，结合后端的二次校验，能有效的避免被其他人肆意抓取并模拟验证，进一步提升验证码的的可靠性 :collision: 且能满足大部分用户的不同定制化需求，譬如自定义背景图 / 定制主题色等等 :fire: :fire:
https://github.com/lirongtong/miitvip-captcha

canvas captcha component makeit makeit-admin-pro makeit-captcha makeit-component miitvip vite vue-component vue3

Last synced: about 2 hours ago
JSON representation

:sparkling_heart: 基于 Vue3.x + Vite4.x + Canvas 开发的滑块验证码 :sparkling_heart: 动态生成验证滑块，结合后端的二次校验，能有效的避免被其他人肆意抓取并模拟验证，进一步提升验证码的的可靠性 :collision: 且能满足大部分用户的不同定制化需求，譬如自定义背景图 / 定制主题色等等 :fire: :fire:

• Host: GitHub
• URL: https://github.com/lirongtong/miitvip-captcha
• Owner: lirongtong
• License: mit
• Created: 2020-12-28T02:30:29.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-08-14T03:09:26.000Z (3 months ago)
• Last Synced: 2024-11-14T23:06:42.040Z (3 days ago)
• Topics: canvas, captcha, component, makeit, makeit-admin-pro, makeit-captcha, makeit-component, miitvip, vite, vue-component, vue3
• Language: TypeScript
• Homepage: https://admin.makeit.vip/components/captcha
• Size: 403 KB
• Stars: 170
• Watchers: 2
• Forks: 31
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    

        

    





    

        Makeit Captcha

    





基于 Vue3.x + Vite4.x 开发，动态生成验证滑块的验证码组件

[![npm package](https://img.shields.io/npm/v/makeit-captcha.svg?style=flat-square)](https://www.npmjs.org/package/makeit-captcha)

[![npm_downloads](http://img.shields.io/npm/dm/makeit-captcha.svg?style=flat-square)](http://www.npmtrends.com/makeit-captcha)

![MIT](https://img.shields.io/badge/license-MIT-ff69b4.svg)

![webpack](https://img.shields.io/badge/webpack-5.73.0-orange.svg)

![vue](https://img.shields.io/badge/vue-3.2.47-green.svg)

![vite](https://img.shields.io/badge/vite-4.1.1-yellow.svg)

![axios](https://img.shields.io/badge/axios-1.3.2-red.svg)

![ant design vue](https://img.shields.io/badge/ant%20design%20vue-3.x-blueviolet.svg)



## 注

> 独立组件不再更新

>

> 请使用 [Makeit Admin Pro - Captcha](https://admin.makeit.vip/component/captcha) 组件

## 关于

> Makeit Captcha 2.x 滑块验证码组件，基于 Vue3.x + Vite4.x + Canvas 开发，动态生成验证滑块，结合后端进行二次校验，能有效避免被恶意抓取后的模拟验证，进一步提升验证码的可靠性。

:white_check_mark: 自定义主题配色 :evergreen_tree:

:white_check_mark: 自定义初始化验证码 :sparkling_heart:

:white_check_mark: 自定义远程校验结果 :collision:

:white_check_mark: 动态配置验证码弹窗背景图 :hibiscus:

## 安装

```bash

npm i makeit-captcha

```

## 使用

```ts

import { createApp } from 'vue'

import MakeitCaptcha from 'makeit-captcha'

import 'makeit-captcha/dist/captcha.min.css'

import App from './app.vue'

const app = createApp(App)

app.use(MakeitCaptcha)

app.mount('#app')

```

## 示例

```Vue

    


        

        

        

        重置

        

        

        

        

        

    


    import { ref, reactive } from 'vue'

    const captcha = ref(null)

    const params = reactive({

        verify: { key: null }

    })

    

    const initAfter = (res) => {

        if (res?.ret?.code === 200) {

            localStorage.setItem('mi-captcha-key', res?.data?.key)

            params.verify.key = res?.data?.key

        }

    }

    const reset = () => {

        console.log('reinitialize')

        captcha.value?.reset(false)

    }

```

## 更多

> 更多定制化内容及使用请查看在线示例：[https://admin.makeit.vip/components/captcha](https://admin.makeit.vip/components/captcha)