# tui-rotate-verify 旋转图片验证会员组件

介绍

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

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

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

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

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

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

# 微信小程序引入（可在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

属性名	类型	说明	默认值
type V1.7.1	Number, String	验证类型：1-前端验证 2-后端验证，返回旋转角度	1
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~~ V2.3.0+后废弃	~~String~~	~~滑动条边框~~	~~1rpx solid #5677fc~~
sliderBarBorderWidth V2.3.0+	Number,String	滑动条边框宽度，单位rpx	2
sliderBarBorderStyle V2.3.0+	String	滑动条边框样式，可选值：solid、dotted、dashed	solid
sliderBarBorderColor V2.3.0+	String	滑动条边框颜色	#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

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

事件名	说明	回调参数
success	验证成功时触发	{ }
error	验证失败时触发	{ }
close	验证弹框关闭事件	{ }
result V1.7.1	type=2时图片旋转结束时触发	{angle:旋转角度 }