SliderCaptchaModal 滑块验证码

滑块拼图验证码模态框，基于 vue3-slide-verify 实现拖拽验证。

使用方式

<template>
  <n-button @click="showCaptcha = true">验证</n-button>
  <SliderCaptchaModal
    v-model:show="showCaptcha"
    :images="captchaImages"
    @success="onVerified"
    @fail="onFailed"
  />
</template>

<script setup>
import { ref } from 'vue'
import SliderCaptchaModal from '@/components/SliderCaptchaModal.vue'

const showCaptcha = ref(false)
const captchaImages = ref(['/captcha-bg-1.jpg', '/captcha-bg-2.jpg'])

function onVerified() {
  console.log('验证通过')
}

function onFailed() {
  console.log('验证失败')
}
</script>

Props

属性	类型	默认值	说明
show	Boolean	false	控制显示/隐藏（v-model）
images	Array	[]	拼图背景图片列表

Events

事件	参数	说明
update:show	(value: boolean)	显示状态变更
success	-	验证通过
fail	-	验证失败
refresh	-	刷新验证码

暴露方法

方法	说明
reset()	重置验证码
handleClose()	关闭弹窗

行为

• 验证成功后 800ms 自动关闭
• 验证失败时显示错误提示，然后重置

依赖

• vue3-slide-verify
• naive-ui（NModal）