RotateVerify 旋转验证

用户通过拖动旋转图片，页面根据返回的角度请求服务端验证。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 旋转验证弹框 -->
<fui-rotate-verify ref="rotateRef" :src="rotatedImage" @verify="handleVerify" />

通过 this.$refs.rotateRef.show() 打开；在 handleVerify 中校验角度，成功后调用 success()，失败后调用 fail()。

属性

属性	类型	说明	官网默认值
width	Number / String	弹框宽度，单位 rpx	600
background	String	弹框背景色	#FFFFFF
title	String	标题	安全验证
color	String	标题颜色	#B2B2B2
size	Number / String	标题字号，单位 rpx	28
descrColor	String	提示颜色	#333333
descrSize	Number / String	提示字号，单位 rpx	32
src	String	已旋转的图片地址，必填	-
imgWidth	Number / String	图片宽度，单位 rpx	240
borderColor	String	滑动条与滑块边框色	#EEEEEE
sliderBgColor	String	滑块背景色	#FFFFFF
closeColor	String	关闭图标颜色	#B2B2B2
slideColor	String	滑动图标颜色	#333333
passColor	String	成功图标颜色	#09BE4F
failColor	String	失败图标颜色	#FF2B2B
zIndex	Number / String	层级，nvue 不支持	996
maskBgColor	String	遮罩颜色	rgba(0,0,0,.6)
maskClosable	Boolean	点击遮罩是否关闭	false

事件

事件	说明	回调参数
verify	滑动完成后请求验证	{ angle }

实例提供 show()、closeVerify()、success() 和 fail()；关闭和失败会重置验证。nvue 的层级受元素顺序影响。

插槽

插槽	说明
—	官网未列出该组件的插槽