Vue Click Captcha 插件 (Vue 2版本)

这是一个基于Vue 2的点击验证码插件

安装

npm install click-captcha-v2 --save
# 或
pnpm add click-captcha-v2

使用方法

全局引入

// main.js
import Vue from 'vue'
import App from './App.vue'
import ClickCaptchaV2 from 'click-captcha-v2'

Vue.use(ClickCaptchaV2, {
  // 全局配置
  autoHideStatus: true,
  requestHeaders: {
    'X-Requested-With': 'XMLHttpRequest'
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

组件中使用

<template>
    <div class="demo-container">
        <h1>Vue点击验证码插件演示</h1>
        <button @click="showCaptcha = true">打开验证</button>
        <ClickCaptchaV2 
          ref="captchaRef" 
          :showCaptcha="showCaptcha" 
          :sourceUrl="sourceUrl"
          @point-selected="handlePointSelected" 
          @close="showCaptcha=false" 
        />
    </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      showCaptcha: false,
      sourceUrl: "http://localhost:8848/api/captcha"
    }
  },
  methods: {
    handlePointSelected(data) {
      console.log('验证码选择了点', data)
    }
  }
}
</script>