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

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

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

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

 <wui-button
        type="gray"
        width="400rpx"
        height="84rpx"
        text="点击按钮进行验证"
        bold
        :margin="['48rpx']"
        @click="btnVerify"
>
</wui-button>
</view>
<wui-rotate-verify
        ref="rvRef"
        :src="srcUrl"
        @verify="verify"
></wui-rotate-verify>

 //图片地址（后端获取返回并已做初始角度旋转）
  const srcUrl = ref<any>('');
  //图片初始化旋转的角度（当后端进行验证时不需要返回）
  const initAngle = ref<any>(0);
  //验证结果误差范围 deg
  const range = ref<any>(0);
  onLoad(options => {
    getVerifyImage();
  });
  const getVerifyImage = () => {
    //获取需要验证的图片，后端处理旋转并返回图片地址
    //此处仅为演示省略请求，使用预先处理的图片
    srcUrl.value = `https://womanhospital-oss.gjwlyy.com/common/picture/20230606/1686016986035275.jpg`;
    //仅当在前端验证结果时返回
    initAngle.value = 90;
    //仅当在前端验证结果时返回
    range.value = 20;
  };
  const rvRef = ref<any>('');
  const btnVerify = () => {
    //需要等组件初始化完成
    rvRef.value && rvRef.value.show();
  };
  /*
   验证结果，仅前端验证时使用（模拟后端验证）
  @param {Number} angle 旋转角度
  @param {Number} initAngle 图片初始化时旋转角度，后端返回 [建议区间 -330deg<angle <-30deg 或 30deg<angle<330deg]
  @param {Number} range 可误差角度范围，约定或后端返回
  */
  const verifyRes = (angle, initAngle, range) => {
    let res = false;
    if (
      Math.abs(angle + initAngle - 330) <= range ||
      Math.abs(angle + initAngle) <= range
    ) {
      res = true;
    }
    return res;
  };
  const verify = e => {
    console.log(e);
    //验证旋转角度是否正确
    //e.angle 旋转角度，注意返回角度中可能存在多位小数，请按需处理
    console.log(e.angle);
    //可将结果发送至后端进行验证
    //...
    //此处为演示仅在前端进行验证
    //  rvRef.value..verifyRes(e.angle, 180, 5, (res) => {
    //        console.log(res)
    // })
    //此步骤可在后端进行完成（后端验证时仅传e.angle参数即可）
    let res = verifyRes(e.angle, initAngle.value, range.value);
    if (res) {
      //验证通过
      rvRef.value.success();
      Toast('验证通过！');
      setTimeout(() => {
        //关闭验证框
        rvRef.value.closeVerify();
      }, 300);
    } else {
      //验证失败
      //验证失败多次可重新获取验证图片
      rvRef.value.fail();
      Toast('验证失败！');
    }
  };

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	验证失败时调用，显示失败图标并重置验证	-	-