RotateVerify 旋转验证码

概述

RotateVerify 旋转验证码，根据提示进行行为验证。

温馨提示

组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。

支持平台

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

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiRotateVerify from "@/components/firstui/fui-rotate-verify/fui-rotate-verify.vue"
export default {
	components:{
		fuiRotateVerify
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 src 属性设置验证所需图片（后端提供，并已做初始旋转），@verify 事件当旋转完成后触发，返回旋转角度。

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

<fui-rotate-verify ref="rv" :src="src" @verify="verify"></fui-rotate-verify>

//methods
//验证旋转角度是否正确
verify(e) {
	console.log(e)
	//e.angle 旋转角度，注意返回角度中可能存在多位小数，请按需处理
	console.log(e.angle)
	//可将结果发送至后端进行验证
	//...
	//此处为演示仅在前端进行验证
	//此步骤可在后端进行完成（后端验证时仅传e.angle参数即可）
	let res = this.verifyRes(e.angle, this.initAngle, this.range)
	if (res) {
		//验证通过
		this.$refs.rv.success();
		this.fui.toast('验证通过！')
		setTimeout(() => {
			//关闭验证框
			this.$refs.rv.closeVerify()
		}, 300)
	} else {
		//验证失败
		//验证失败多次可重新获取验证图片
		this.$refs.rv.fail()
		// this.fui.toast('验证失败！')
	}
},
/*
验证结果，仅前端验证时使用（模拟后端验证）
@param {Number} angle 旋转角度
@param {Number} initAngle 图片初始化时旋转角度，后端返回 [建议区间 -330deg<angle <-30deg 或 30deg<angle<330deg]
@param {Number} range 误差角度范围，约定或后端返回
*/
verifyRes(angle, initAngle, range) {
	let res = false
	if (Math.abs(angle + initAngle - 360) <= range || Math.abs(angle + initAngle) <= range) {
		res = true
	}
	return res
}

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
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	验证框层级z-index值	996	Nvue端不支持，默认越靠后的元素层级越高
maskBgColor	String	遮罩背景颜色	rgba(0,0,0,.6)	-
maskClosable	Boolean	击遮罩 是否可关闭验证框	false	-

Events

事件名	说明	回调参数
@verify	滑动完成后触发，返回旋转角度进行验证	{angle:旋转角度 }

Methods

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数	返回参数
show	打开验证框	-	-
closeVerify	关闭验证框并重置验证	-	-
success	验证通过时调用，显示成功图标	-	-
fail	验证失败时调用，显示失败图标并重置验证	-	-

//特别说明：

1、验证图片应从后端获取返回，并已经在后端做了初始角度旋转
  初始旋转角度建议区间为 -330deg < angle < -30deg 或 30deg < angle < 330deg

2、@verify 事件返回用户操作后旋转的角度，拿到旋转角度后传给后端进行验证。

//验证方法，参考js方法自行转为后端方法
//注意：初始角度和误差角度后端自行获取，前端只需传值旋转角度即可
/*
验证结果，仅前端验证时使用（模拟后端验证）
@param {Number} angle 旋转角度
@param {Number} initAngle 图片初始化时旋转角度，后端返回 [建议区间 -330deg<angle <-30deg 或 30deg<angle<330deg]
@param {Number} range 误差角度范围，约定或后端返回
*/
verifyRes(angle, initAngle, range) {
	let res = false
	if (Math.abs(angle + initAngle - 360) <= range || Math.abs(angle + initAngle) <= range) {
		res = true
	}
	return res
}

/*
  验证通过判断说明：
  1、当初始旋转角度为正数，angle 与 initAngle 的和与 360deg 之间差值绝对值小于等于range即为验证通过
  2、当初始旋转角度为负数，angle 与 initAngle 的和的绝对值小于等于range即为验证通过
*/

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)