# tui-rotate-verify 旋转图片验证

介绍

旋转图片验证,可调整样式,可重置。

# 引入

# uni-app引入

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

import tuiRotateVerify from "@/components/thorui/tui-rotate-verify/tui-rotate-verify"
export default {
	components:{
		tuiRotateVerify
	}
}

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

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

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

# 代码演示

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

基本用法

通过 imgSrc 属性设置旋转图片, angle 属性设置旋转角度,angle 属性重置组件,show 属性控制组件是否显示。

<!--uni-app-->
<tui-rotate-verify :imgSrc="imgSrc" :angle="angle" :reset="reset" :show="show" @success="success" @error="error" @close="closeVerify"></tui-rotate-verify>
		 
<!--微信小程序-->
<tui-rotate-verify imgSrc="{{imgSrc}}" angle="{{angle}}" reset="{{reset}}" show="{{show}}" bindsuccess="success" binderror="error" bindclose="closeVerify"></tui-rotate-verify>

# Slots

名称 说明
default 标签内底部位置显示内容

# Props

参数 类型 说明 默认值
show Boolean 是否显示验证弹框 false
width Number 验证弹层宽度,单位rpx 600
radius Number 验证弹层圆角,单位rpx 24
backgroundColor String 验证弹层背景色 #fff
padding String 验证弹层padding值 60rpx 30rpx'
imgSrc String 旋转图片地址 -(必传值)
imgWidth Number 旋转图片宽度,约定为正方形图片,单位rpx 240
imgRadius String 旋转图片圆角值 50%
angle Number 图片默认旋转角度,取值范围: -330deg<angle <-30deg 或 30deg<angle<330deg 30
errorRange Number 角度误差范围 5
closeColor String 关闭图标颜色 #999
closeSize Number 关闭图标字体大小,单位rpx 40
title String 标题文本 安全验证
titleColor String 标题文本颜色 #999
titleSize Number 标题文本字体大小,单位rpx 30
desc String 操作描述文本 拖动滑块,使图片角度为正
descColor String 操作描述文本颜色 #333
descSize Number 操作描述文本字体大小 36
sliderBarWidth Number 滑动条宽度,单位rpx 540
sliderBarHeight Number 滑动条高度,单位rpx 96
sliderBarBorder String 滑动条边框 1rpx solid #5677fc
sliderBarBackground String 滑动条背景色 rgba(86,119,252,.1)
blockBackground String 滑块背景色 #5677fc
arrowColor String 滑块内箭头颜色 #fff
arrowSize Number 滑块内箭头字体大小,单位rpx 40
errorColor String 验证失败时图标颜色 #EB0909
successColor String 验证成功时图标颜色 #07c160
zIndex Number 验证弹层z-index值 999
maskZIndex Number 遮罩层z-index值 998
maskClosable Boolean 点击遮罩 是否可关闭 true
reset Number 置滑块,改变数值即表示重置操作,多次重置数值递增 0

# Events

事件名 说明 回调参数
success 验证成功时触发 { }
error 验证失败时触发 { }
close 验证弹框关闭事件 { }

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

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