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: 5 months 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
• Created: 2020-12-28T02:30:29.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2025-07-08T02:55:13.000Z (11 months ago)
• Last Synced: 2025-09-30T01:51:42.806Z (9 months 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: 566 KB
• Stars: 172
• Watchers: 2
• Forks: 31
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


    

        

    





    

        Makeit Captcha

    





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

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

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

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

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

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

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

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

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



## 关于

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

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

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

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

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

## 安装

```bash

npm i @miitvip/captcha

```

## 使用

```ts

import { createApp } from 'vue'

import MakeitCaptcha from '@miitvip/captcha'

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

import App from './app.vue'

const app = createApp(App)

app.use(MakeitCaptcha)

app.mount('#app')

```

## 国际化（本身项目包含 vue-i18n）

```ts

/**

 * 如果项目本身有引入 vue-i18n，请导出 setupCaptchaI18n，

 * 且在 captcha 组件 install 之前调用。

 * 避免 vue-i18n 冲突（多次实例化）

 * 如下示例：

 */

import { createApp } from 'vue'

import MakeitCaptcha, { setupCaptchaI18n } from '@miitvip/captcha'

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

import App from './app.vue'

const app = createApp(App)

const i18n = createI18n({

    legacy: false,

    locale: 'zh-cn',

    messages: {}

})

setupCaptchaI18n(i18n)

app.use(MakeitCaptcha)

app.mount('#app')

```

## 示例

```html

    


        

        


        

        重置

        

        

        

        

    


    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/component/captcha](https://admin.makeit.vip/component/captcha)