VerifySlider 滑块验证

创建一个滑块验证的交互组件，用户需要将滑块拖动到指定的位置来完成验证。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='滑块验证码' class="p.30">
		<t-card class="mb.30" title='VerifySlider 滑块验证码' sub-title="滑块验证码用于机器人验证,常用于接口访问防止机器频繁操作浪费资源!"></t-card>
		<t-section class="mb.30" title="基础使用+主题展示"></t-section>
		<t-verify-slider class="mb.30"></t-verify-slider>
		<t-verify-slider class="mb.30" type="s"></t-verify-slider>
		<t-verify-slider class="mb.30" type="w"></t-verify-slider>
		<t-verify-slider class="mb.30" type="e"></t-verify-slider>
		<t-section class="mb.30" title="样式设置"></t-section>
		<t-verify-slider class="mb.30-h.100" type="e" size="l"></t-verify-slider>
		<t-verify-slider class="w.300-mb.30" type="s"></t-verify-slider>
		<t-section class="mb.30" title="自定义颜色覆盖主题"></t-section>
		<t-verify-slider class="mb.30-h.100" type="e" active-color="blue" inactive-color="#ff5500"
			size="l"></t-verify-slider>
	</t-page>
</template>

Props

名称	描述	类型	默认值	可选值
type	组件类型	String	'p'	-
title	标题	String	'请拖动滑块到虚线框'	-
successTitle	验证成功标题	String	'验证成功'	-
activeSliderIcon	激活状态下的滑块图标	String	'checkmark-circle-fill'	-
inactiveSliderIcon	非激活状态下的滑块图标	String	'arrow-right-double'	-
activeColor	激活颜色	String	''	-
inactiveColor	非激活颜色	String	'#bfbfbf'	-
verifyRange	验证范围	Number	10	-

Events

事件名	描述	回调参数	版本
success	当验证成功时触发	-	-
fail	当验证失败时触发	-	-

Slots

名称	描述
-	-