@inmeng/makeit-captcha

Makeit Captcha

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

关于

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

安装

npm i makeit-captcha

使用

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')

示例

<!-- 基础效果 -->
<template>
    <mi-captcha></mi-captcha>
</template>

<!-- 自定义主题色 -->
<template>
    <mi-captcha theme-color="#2F9688"></mi-captcha>
</template>

<!-- 自定义初始化 / 校验等 -->
<template>
    <mi-captcha theme-color="#be6be0"
        init-action="v1/captcha/init"
        @init="initAfter"
        verify-action="v1/captcha/verification"
        :verify-params="verifyParams">
    </mi-captcha>
</template>

import { defineComponent } from 'vue'
export default defineComponent({
    data() {
        return {
            verifyParams: {}
        }
    },
    methods: {
        initAfter(res) {
            if (res.ret.code === 1) {
                localStorage.setItem('mi-captcha-key', res.data.key)
                this.verifyParams = {key: res.data.key}
            }
        }
    }
})

更多

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