# t-verify-rotate

VerifyRotate 旋转验证

t-verify-rotate 组件介绍

t-verify-rotate 是旋转验证码组件，用于机器人验证。用户需要拖动滑块旋转图片到正确角度完成验证，常用于接口访问防止机器频繁操作。

t-verify-rotate 平台兼容

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

t-verify-rotate 基础用法

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

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title='VerifyRotate 滑块验证码'
				sub-title="滑块验证码用于机器人验证,常用于接口访问防止机器频繁操作浪费资源!"></t-card>
		<t-section class="mb-15"
				   title="基础使用+主题展示"></t-section>
		<t-col class='fc'>
			<t-verify-rotate size='large'
							 class="mb-15 w-275"
							 src='/static/image/avatar.jpeg'></t-verify-rotate>
			<t-verify-rotate class="mb-15 w-240"
							 src='/static/image/avatar.jpeg'></t-verify-rotate>
			<t-verify-rotate size='small'
							 class="mb-15 w-200"
							 type='error'
							 src='/static/image/avatar.jpeg'></t-verify-rotate>
			<t-verify-rotate size='mini'
							 class="mb-15 w-200"
							 type='success'
							 src='/static/image/avatar.jpeg'></t-verify-rotate>
		</t-col>
	</view>
</template>

t-verify-rotate Props

属性名	说明	类型	默认值
src	验证图片的地址	string	''
title	标题	string	'安全验证'
lable	提示标签	string	'拖动滑块至图片正确的角度'
successTitle	验证成功提示文本	string	'验证成功'
activeBarIcon	验证成功滑块图标	string	'checkbox-mark'
inactiveBarIcon	验证失败滑块图标	string	'arrow-right-double'
activeColor	验证成功前景色	string	''（使用主题色）
inactiveColor	验证失败的颜色	string	'#eeeeee'
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-rotate Events

事件名	说明	回调参数
success	验证成功时触发	-
fail	验证失败时触发	-