# vue-captcha

**Repository Path**: langlanglang/vue-captcha

## Basic Information

- **Project Name**: vue-captcha
- **Description**: vue行为验证，滑块，旋转，点击
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 1
- **Created**: 2023-12-04
- **Last Updated**: 2025-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-captcha
配合仓库 

[gitee poster](https://gitee.com/langlanglang/poster)

[github poster](https://github.com/kkokk/poster)

一起使用的滑块验证 vue 版本

### 示例

<img src="https://raw.githubusercontent.com/kkokk/poster/master/tests/122301561368230151165-1.gif" alt="输入图片说明" style="zoom: 33%;" />

<img src="https://raw.githubusercontent.com/kkokk/poster/master/tests/1223015613610230151165.gif" alt="输入图片说明" style="zoom: 33%;" />


## 使用文档

### 滑块验证

```bash
# 安装
npm install @kkokk/captcha
yarn add @kkokk/captcha
# 卸载
npm uninstall @kkokk/captcha
yarn remove @kkokk/captcha
```

### Attributes
| 属性名      | 类型      | 默认值                                                       | 说明       |
|----------|---------|-----------------------------------------------------------|----------|
| visible  | Boolean | false                                                     | 开关       |
| options  | Object  | { sliderImg: '背景图', sliderKey: '验证key', sliderY: '滑块高度' } | 滑块验证参数       |
| options  | Object  | { rotateImg: '背景图', rotateKey: '验证key'}                | 旋转验证参数       |
| loading  | Boolean  | false                                                     | 加载状态     |
| title  | String  | 滑块安全验证                                                  | 标题     |
| tips  | String  | 拖动下方滑块完成拼图                                            | 提示     |
| successText  | String  | 验证成功                                                | 成功提示     |
| errorText  | String  | 是不是太难了，咱换一个                                      | 错误提示     |
| question  | String  | 拖动滑块完成拼图，欢迎提建议！                                | 问题提示     |

### Events
| 事件名称      | 说明          | 回调参数                                                         |
|----------|-------------|--------------------------------------------------------------|
| check  | 检查是否正确的回调函数 | key, value, done, error （验证需要的key, 校验值, 完成回调, 错误回调） |
| close  | 弹窗关闭回调函数    | -                                                            |
| refresh  | 刷新回调函数      | -                                                            |
| error  | 错误回调函数      | -                                                            |

### 使用
```js
// main.js 引入

import Captcha from '@kkokk/captcha'
Vue.use(Captcha)
```
```vue
<template>
  <div id="app">
    <!-- 滑块拼图验证 -->
    <button @click="open">滑块拼图验证</button>
    <slider-captcha 
      v-model="visible"
      :options="options"
      :loading="loading"
      @check="check"
      @close="close"
      @refresh="getSliderOptions"
      @error="getSliderOptions"
    >
      <!-- vue2 -->
      <span slot="title">自定义标题-安全验证</span>
      <span slot="successText">自定义成功提示-登录中</span>
      <span slot="errorText">自定义错误提示-是不是太难了换一个</span>
      <span slot="tips">自定义提示拖动下方滑块完成拼图</span>
      <!-- <span slot="question">自定义提示</span> -->
      <!-- vue2 -->
        
      <!-- vue3 -->
      <template #title>自定义标题-安全验证</template>
      <template #successText>自定义成功提示-登录中</template>
      <template #errorText>自定义错误提示-是不是太难了换一个</template>
      <template #tips>自定义提示拖动下方滑块完成拼图</template>
      <!-- <template #question>自定义提示</template> -->
      <!-- vue3 -->
    </slider-captcha>
    
    <!-- 旋转图片验证 -->
    <button @click="rotateOpen">旋转图片验证</button>
    <rotate-captcha
      v-model="visible"
      :options="options"
      :loading="loading"
      @check="check"
      @close="close"
      @refresh="getRotateOptions"
      @error="getRotateOptions"
    >
      <!-- vue2 -->
      <span slot="title">自定义标题-安全验证</span>
      <span slot="successText">自定义成功提示-登录中</span>
      <span slot="errorText">自定义错误提示-是不是太难了换一个</span>
      <span slot="tips">自定义提示拖动下方滑块使角度为正</span>
      <!-- <span slot="question">自定义提示</span> -->
      <!-- vue2 -->
        
      <!-- vue3 -->
      <template #title>自定义标题-安全验证</template>
      <template #successText>自定义成功提示-登录中</template>
      <template #errorText>自定义错误提示-是不是太难了换一个</template>
      <template #tips>自定义提示拖动下方滑块使角度为正</template>
      <!-- <template #question>自定义提示</template> -->
      <!-- vue3 -->
    </rotate-captcha>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      sliderVisible: false,
      visible: false,
      sliderLoading: false,
      loading: false,
      sliderOptions: {},
      options: {},
    }
  },
  methods: {
    // 
    rotateOpen() {
      this.visible = true
      this.getRotateOptions()
    },
    // 打开触发
    open() {
      this.sliderVisible = true
      this.getSliderOptions()
    },
    // 验证
    check(key, value, done, error)
    {
      this.loading = true
      this.sliderLoading = true
      this.request({
        type: 'post',
        url: 'http://127.0.0.1:8111/',
        data: {
          key: key,
          value: value,
        },
        success: (res) => {
          this.loading = false
          this.sliderLoading = false
          if(res.pass) {
            done()
          } else {
            error()
          }
        }
      })
    },
    // 关闭触发
    close() {

    },
    // 获取滑块验证参数
    getSliderOptions()
    {
      this.sliderLoading = true
      this.request({
        type: 'get',
        url: 'http://127.0.0.1:8111/?type=slider',
        success: (res) => {
          this.sliderOptions = {
            sliderImg: res.img,
            sliderKey: res.key,
            sliderY: res.y
          }
          this.sliderLoading = false
        }
      })
    },
    getRotateOptions()
    {
      this.loading = true
      this.request({
        type: 'get',
        url: 'http://127.0.0.1:8111/',
        success: (res) => {
          this.options = {
            rotateImg: res.img,
            rotateKey: res.key,
          }
          this.loading = false
        }
      })
    },
    // 封装一个简单请求接口
    request(obj) {
      return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();

        switch(obj.type) {
          case 'get':
            xhr.open('GET', obj.url, true);
            xhr.onload = function() {
              resolve(obj.success(JSON.parse(this.responseText)))
            };
            xhr.onError= function () {
                    reject(obj.error({
                        status: this.status,
                        statusText: xhr.statusText
                    }));
                };
            break;
          case 'post':
            xhr.open('POST', obj.url, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
              if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                resolve(obj.success(JSON.parse(this.responseText)))
              }
            };
            break;
        }
        
        xhr.send(JSON.stringify(obj.data));
      });
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```