VerifyRotate 旋转验证组件

VerifyRotate 组件用于创建一个旋转验证的交互组件，用户需要将滑块拖动到正确的角度来完成验证。

支持平台

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

示例

<template>
	<t-page title='旋转滑块验证' class="p.30">
		<t-card class="mb.30" title='VerifyRotate 滑块验证码' sub-title="滑块验证码用于机器人验证,常用于接口访问防止机器频繁操作浪费资源!"></t-card>
		<t-section class="mb.30" title="基础使用+主题展示"></t-section>
		<t-verify-rotate size='l' class="mb.30" src='/static/image/avatar.jpeg'></t-verify-rotate>
		<t-verify-rotate size='l' class="mb.30" type='e' src='/static/image/avatar.jpeg'></t-verify-rotate>
		<t-verify-rotate size='l' class="mb.30" type='s' src='/static/image/avatar.jpeg' effect="l"></t-verify-rotate>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">

</style>

Props

名称	描述	类型	默认值	可选值
src	验证图片的来源	String	''	-
type	组件类型	String	'p'	-
title	标题	String	'安全验证'	-
lable	标签	String	'拖动滑块至图片正确的角度'	-
successTitle	验证成功标题	String	'验证成功'	-
activeBarIcon	激活状态下的滑块图标	String	'checkmark-circle-fill'	-
inactiveBarIcon	非激活状态下的滑块图标	String	'arrow-right-double'	-
activeColor	激活颜色	String	''	-
inactiveColor	非激活颜色	String	'#eeeeee'	-
verifyRange	验证范围	Number	10	-

Events

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

Slots

名称	描述
-	-

示例

<t-verify-rotate src="path/to/image.jpg" @success="handleSuccess" @fail="handleFail"></t-verify-rotate>