# t-verify-slider

VerifySlider 滑块验证

t-verify-slider 组件介绍

t-verify-slider 是滑块验证码组件，用于机器人验证，常用于接口访问防止机器频繁操作浪费资源。用户需要拖动滑块到指定位置完成验证。

t-verify-slider 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-verify-slider 基础用法

基础用法参考 demo/verify-slider/verify-slider.uvue。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title='VerifySlider 滑块验证码'
				sub-title="滑块验证码用于机器人验证,常用于接口访问防止机器频繁操作浪费资源!"></t-card>
		<t-section class="mb-15"
				   title="基础使用+主题展示"></t-section>
		<t-verify-slider class="mb-15"
						 size="large"></t-verify-slider>
		<t-verify-slider class="mb-15"
						 type="success"
						 size="medium"></t-verify-slider>
		<t-verify-slider class="mb-15"
						 size="small"
						 type="warning"></t-verify-slider>
		<t-verify-slider class="mb-15"
						 size="mini"
						 type="error"></t-verify-slider>
		<t-section class="mb-15"
				   title="样式设置"></t-section>
		<t-verify-slider class="mb-15 h-50"
						 type="error"
						 size="large"></t-verify-slider>
		<t-verify-slider class="w-150 mb-15"
						 type="success"></t-verify-slider>
		<t-section class="mb-15"
				   title="自定义颜色覆盖主题"></t-section>
		<t-verify-slider class="mb-15 h-50"
						 type="error"
						 active-color="blue"
						 inactive-color="#ff5500"
						 size="large"></t-verify-slider>
	</view>
</template>

t-verify-slider Props

属性名	说明	类型	默认值
title	提示文本	string	'请拖动滑块到虚线框'
successTitle	验证成功提示文本	string	'验证成功'
activeSliderIcon	验证成功时滑块图标	string	'checkmark-circle-fill'
inactiveSliderIcon	验证失败时滑块图标	string	'arrow-right-double'
activeColor	验证成功时颜色	string	''（使用主题色）
inactiveColor	验证失败时颜色	string	'#bfbfbf'
verifyRange	验证容错范围（像素）	number	10
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'

t-verify-slider Events

事件名	说明	回调参数
click	点击时触发	event