FxCaptchaSlider 滑块验证

按住滑块拖到最右端即通过。支持 isSlot 插槽模式作为旋转/拼图验证码的基座。

基础用法

<FxCaptchaSlider v-model="passed" @success="onSuccess" />

<script setup lang="ts">
import { ref } from "vue"
import { FxCaptchaSlider } from "@fx/components"

const passed = ref(false)
const onSuccess = ({ time }) => console.log(`验证通过，用时 ${time}s`)
</script>

Attributes

参数	说明	类型	默认值
v-model	通过状态	boolean	false
text	未通过时的提示文字	string	'请按住滑块拖动'
successText	通过后的提示文字	string	'验证通过'
isSlot	插槽基座模式（拖到头不自动判定，由父级置 v-model）	boolean	false

Events

事件名	说明	回调参数
success	验证通过	({ isPassing: boolean, time: string })
start	开始拖动	PointerEvent
move	拖动中	({ event: PointerEvent, moveDistance: number, moveX: number })
end	拖动结束（松手/拖出）	PointerEvent

Expose

方法	说明
resume	复位滑块（回弹动画；isSlot 下同时清通过态）

Expose 类型：CaptchaSliderActionType（组合方持有基座引用时使用）。

Slots

插槽	说明
text	内容文字（作用域：{ isPassing }）
actionIcon	滑块图标（作用域：{ isPassing }）