Tui Plus Vapor

Appearance

t-verify-slider ​

VerifySlider 滑块验证

组件介绍 ​

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

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

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

vue
<template>
  <view class="verify-slider-demo">
    <!-- 基础用法 -->
    <t-verify-slider @click="onVerify"></t-verify-slider>
    
    <!-- 自定义提示文本 -->
    <t-verify-slider 
      title="请按住滑块，拖动到最右边"
      successTitle="验证通过">
    </t-verify-slider>
    
    <!-- 自定义颜色 -->
    <t-verify-slider 
      type="success"
      inactiveColor="#999999">
    </t-verify-slider>
    
    <!-- 自定义容错范围 -->
    <t-verify-slider 
      :verifyRange="15">
    </t-verify-slider>
  </view>
</template>

<script setup>
function onVerify(e) {
  console.log('验证状态:', e);
}
</script>

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

Props ​

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

Events ​

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