一篇文章带你入门前端的滑块验证怎么做

# 使用 npm
npm install miitvip/captcha --save

# 使用 yarn
yarn add miitvip/captcha

<template>
  <!-- 滑块验证组件将在这里使用 -->
  <mi-captcha />
</template>

<script setup>
// 局部引入组件
import MiCaptcha from 'miitvip/captcha'
</script>

import { createApp } from 'vue'
import App from './App.vue'
// 全局引入组件
import MiCaptcha from 'miitvip/captcha'

const app = createApp(App)
// 注册为全局组件
app.component('mi-captcha', MiCaptcha)
app.mount('#app')

<template>
  <mi-captcha
    @init="handleInit"
  />
</template>

<script setup>
import { reactive } from 'vue'

const verifyParams = reactive({
  key: ''  // 用于存储初始化接口返回的 key
})

// 处理初始化完成事件
const handleInit = (response) => {
  // 假设后端返回格式为 { code: 200, data: { key: 'xxx', ... } }
  if (response.code === 200) {
    // 保存 key 到验证参数中，供后续验证使用
    verifyParams.key = response.data.key
  } else {
    console.error('验证码初始化失败：', response.msg)
  }
}
</script>

<template>
  <mi-captcha
    @success="handleSuccess"
  />
</template>

<script setup>
// 处理验证成功事件
const handleSuccess = (response) => {
  console.log('验证成功，后端返回数据：', response)
  // 执行后续操作，如提交登录表单
  submitLoginForm()
}

// 登录表单提交方法
const submitLoginForm = () => {
  // 实际登录逻辑...
}
</script>

<template>
  <mi-captcha
    @error="handleError"
  />
</template>

<script setup>
import { ElMessage } from 'element-plus'  // 假设使用 Element Plus 的提示组件

// 处理验证失败事件
const handleError = (error) => {
  console.error('验证失败：', error)
  // 提示用户
  ElMessage.error('验证失败，请重试')
  // 可选：自动重置验证码
  captchaRef.value.reset()
}
</script>

<template>
  <div class="captcha-container">
    <h3>滑块验证示例</h3>
    <mi-captcha
      ref="captchaRef"
      theme-color="#42b983"
      :init-action="'/api/captcha/init'"
      :verify-action="'/api/captcha/verify'"
      :verify-params="verifyParams"
      :headers="requestHeaders"
      @init="handleInit"
      @success="handleSuccess"
      @error="handleError"
    />
    <button @click="resetCaptcha" class="reset-btn">重置验证码</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import MiCaptcha from 'miitvip/captcha'
import { ElMessage } from 'element-plus'

// 组件引用
const captchaRef = ref(null)

// 验证参数
const verifyParams = reactive({
  key: '',
  userId: 'user_123',
  client: 'web'
})

// 请求头配置
const requestHeaders = reactive({
  'Content-Type': 'application/json',
  'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
})

// 初始化完成处理
const handleInit = (response) => {
  if (response.code === 200) {
    verifyParams.key = response.data.key
    ElMessage.success('验证码加载成功，请完成验证')
  } else {
    ElMessage.error('验证码加载失败：' + (response.msg || '未知错误'))
  }
}

// 验证成功处理
const handleSuccess = (response) => {
  ElMessage.success('验证成功！')
  // 此处可执行登录、表单提交等操作
  console.log('验证通过，令牌：', response.data.token)
}

// 验证失败处理
const handleError = (error) => {
  ElMessage.error('验证失败：' + (error.msg || '请重试'))
}

// 重置验证码
const resetCaptcha = () => {
  if (captchaRef.value) {
    captchaRef.value.reset()
  }
}
</script>

<style scoped>
.captcha-container {
  width: 300px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.reset-btn {
  margin-top: 15px;
  width: 100%;
  padding: 8px;
  background: #f5f5f5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.reset-btn:hover {
  background: #eee;
}
</style>