基于 Vue3.x + Vite6.x 开发，动态生成验证滑块的验证码组件
[](https://www.npmjs.org/package/@miitvip/captcha)
[](http://www.npmtrends.com/@miitvip/captcha)
## 关于
> 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
```
## 更多
> 更多定制化内容及使用请查看在线示例：[https://admin.makeit.vip/components/captcha](https://admin.makeit.vip/components/captcha)