# tui-slide-verify 滑动验证码 会员组件

介绍

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

# 引入

# uni-app引入

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

import tuiSlideVerify from "@/components/thorui/tui-slide-verify/tui-slide-verify.vue"
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>
    
    // data 数据 及 方法
    export default {
     data() {
     	return {
     		
     	}
     },
     methods: {
     	success() {
     		console.log('验证通过!')
     	}
     }
    }
    
    <!--微信小程序-->
    <tui-slide-verify bindsuccess="success"></tui-slide-verify>
    
    // data 数据 及 方法
    Page({
      data: {
        
      },
      success() {
     	 console.log('验证通过!')
      }
    })
    
    // Make sure to add code blocks to your code group
    设置宽度、高度

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

      <!--uni-app-->
      <tui-slide-verify :slideBarWidth="slideBarWidth" :slideBlockWidth="slideBlockWidth" @success="success"></tui-slide-verify>
      
      // data 数据 及 方法
      export default {
       data() {
       	return {
       		slideBarWidth: 300,
       		slideBlockWidth: 40
       	}
       },
       methods: {
       	success() {
       		console.log('验证通过!')
       	}
       }
      }
      
      <!--微信小程序-->
      <tui-slide-verify slideBarWidth="{{slideBarWidth}}" slideBlockWidth="{{slideBlockWidth}}" bindsuccess="success"></tui-slide-verify>
      
      // data 数据 及 方法
      Page({
        data: {
          slideBarWidth: 300,
          slideBlockWidth: 40
        },
        success() {
       	 console.log('验证通过!')
        }
      })
      
      // Make sure to add code blocks to your code group

      # Slots

      插槽名称 插槽说明
      - -

      # 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

      注:uni-app端绑定事件使用@前缀,如@success;微信小程序原生使用bind前缀,如bindsuccess

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

      # 预览

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

      # 特别说明

      该组件为 会员组件,非开源内容,需开通会员才可获取使用。

      # 线上程序扫码预览

      ThorUI组件库 H5二维码 ThorUI示例
      ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
      Last Updated: 7/21/2023, 2:12:46 PM