# tui-slide-verify 滑动验证码

介绍

滑动验证码,可设置基本样式,可重置验证。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiSlideVerify from "@/components/thorui/tui-slide-verify/tui-slide-verify"
export default {
	components:{
		tuiSlideVerify
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 升级中 升级中 升级中 升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-slide-verify": "/components/thorui/tui-slide-verify/tui-slide-verify"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础使用

success 事件当验证通过时触发。

<!--uni-app-->
<tui-slide-verify @success="success"></tui-slide-verify>

<!--微信小程序-->
<tui-slide-verify bindsuccess="success"></tui-slide-verify>
设置宽度、高度

通过 slideBarWidth 属性设置滑动条宽度,slideBlockWidth 属性设置滑块宽度(滑动条高度)。

<!--uni-app-->
<tui-slide-verify :slideBarWidth="slideBarWidth" :slideBlockWidth="slideBlockWidth" @success="success"></tui-slide-verify>

<!--微信小程序-->
<tui-slide-verify slideBarWidth="{{slideBarWidth}}" slideBlockWidth="{{slideBlockWidth}}" bindsuccess="success"></tui-slide-verify>

# Slots

none

# Props

参数 类型 说明 默认值
slideBarWidth [Number, String] 滑动条宽度,单位px 300
slideBlockWidth [Number, String] 滑块宽度(滑动条高度),单位px 300
borderColor String 滑块border颜色 #E9E9E9
activeBorderColor String 通过验证后滑块border颜色 #19be6b
errorRange [Number, String] 误差范围,距离右侧多少距离验证通过,单位px 2
resetSlide Number 重置滑动 0
size Number 提示文字大小,单位rpx 30
color String 提示文字颜色 #444
activeColor String 验证通过后提示文字颜色 #fff
iconSize Number 图标字体大小,单位rpx 32
arrowColor String 箭头图标颜色 #cbcbcb
checkColor String 验证通过后图标颜色 #19be6b
backgroundColor String 滑动条背景色 #E9E9E9
activeBgColor String 滑过区域背景颜色 #19be6b
passText String 通过提示文字 验证通过

# Events

事件名 说明 回调参数
success 验证通过时触发 { }

# 预览

请以移动端 (opens new window)效果为准,touch事件目前尚未完全在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码