Tui Plus Vapor

Appearance

t-verify-rotate ​

VerifyRotate 旋转验证

组件介绍 ​

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

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

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

vue
<template>
  <view class="verify-rotate-demo">
    <!-- 基础用法 -->
    <t-verify-rotate 
      src="/static/verify-image.jpg"
      @success="onSuccess"
      @fail="onFail">
    </t-verify-rotate>
    
    <!-- 自定义文本 -->
    <t-verify-rotate 
      src="/static/verify-image.jpg"
      title="安全验证"
      lable="拖动滑块将图片摆正"
      @success="onSuccess">
    </t-verify-rotate>
    
    <!-- 自定义容错范围 -->
    <t-verify-rotate 
      src="/static/verify-image.jpg"
      :verifyRange="15"
      @success="onSuccess">
    </t-verify-rotate>
  </view>
</template>

<script setup>
function onSuccess() {
  console.log('验证成功');
  // 执行后续操作
}

function onFail() {
  console.log('验证失败');
  // 提示用户重新验证
}
</script>

<style scoped>
.verify-rotate-demo {
  padding: 40rpx;
}
.verify-rotate-demo t-verify-rotate {
  margin-bottom: 40rpx;
}
</style>

Props ​

属性名说明类型默认值
src验证图片的地址string''
title标题string'安全验证'
lable提示标签string'拖动滑块至图片正确的角度'
successTitle验证成功提示文本string'验证成功'
activeBarIcon验证成功滑块图标string'checkbox-mark'
inactiveBarIcon验证失败滑块图标string'arrow-right-double'
activeColor验证成功前景色string''（使用主题色）
inactiveColor验证失败的颜色string'#eeeeee'
verifyRange验证容错范围（角度）number10
path点击组件后跳转的页面路径string''
hover是否启用点击效果booleanfalse
type组件主题类型string'primary'
disabled是否禁用booleanfalse
effect组件显示主题string'normal'
size组件尺寸，可选 large、medium、small、ministring'medium'

Events ​

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