SliderCaptcha 滑块拼图验证，根据提示进行行为验证。

支持平台

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

基础使用

通过 src 属性设置验证所需图片，imageType 属性设置图片类型，@success 事件当验证成功时触发，@fail 事件当验证失败时触发。

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

<view class="wui-page__bd">
    <view class="wui-btn__box">
        <wui-button
                type="gray"
                width="400rpx"
                height="84rpx"
                text="点击按钮进行验证"
                bold
                :margin="['48rpx']"
                @click="btnVerify"
        >
        </wui-button>
    </view>
    <!--务必保证属性 imageType 正确，H5端注意处理图片资源跨域问题-->
    <wui-slider-captcha
            ref="scRef"
            :src="srcUrl"
            @success="success"
            @fail="fail"
    >
    </wui-slider-captcha>
</view>

 //图片地址（默认宽高比2:1）
  const srcUrl = ref<any>('');
  const current = ref<any>(0);
  onLoad(() => {
    getVerifyImage();
  });
  const getVerifyImage = () => {
    //获取需要验证的图片
    let index = current.value;
    index++;
    if (index > 3) {
      index = 1;
    }
    current.value = index;
    srcUrl.value = `https://womanhospital-oss.gjwlyy.com/common/picture/20230606/1686018743300908.jpeg`;
  };
  const scRef = ref<any>('');
  const btnVerify = () => {
    //需要等组件初始化完成
    scRef.value && scRef.value.show();
  };
  const success = e => {
    Toast('验证通过！');
    setTimeout(() => {
      //关闭验证框
      scRef.value.closeVerify();
    }, 200);
  };
  const fail = e => {
    //当验证失败多次时，可在这里做相应处理
    let times = e.times;
    Toast('验证失败！');
    if (times >= 3) {
      getVerifyImage();
    }
  };

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
type	Number, String	验证类型：1-前端验证，后端只需提供图片即可 2-结合后端验证（除了图片，还需根据前端设置的图片宽高获取位置信息）	1	-
range	Number, String	拼图误差范围，单位px。type=1时有效	3	-
location	Object	裁切的图片与被裁切位置信息，type=2结合后端验证需要传入x，x1，y的值	{ }	-
src	String	背景图片地址，必选参数。还需设置属性imageType值	-	-
imageType	Number, String	背景图片类型：1-网络地址（必须保证可以下载，H5端注意处理图片资源跨域问题） 2-base64（仅app，微信小程序，H5） 3-本地图片（查看canvas文档是否支持），必选参数	1	-
width	Number, String	背景图片宽度，单位rpx	640	-
height	Number, String	背景图片高度，单位rpx	320	-
background	String	验证弹层背景颜色	#FFFFFF	-
title	String	验证弹层标题。请限制字数，避免过长	安全验证	-
color	String	标题字体颜色	#B2B2B2	-
size	Number, String	标题字体大小，单位rpx	28	-
descrColor	String	验证提示字体颜色	#333333	-
closeColor	String	关闭图标颜色	#B2B2B2	-
sliderBgColor	String	滑块的背景颜色	#465CFF	非Nvue端默认为空，可通过css变量（--fui-color-primary）来修改颜色值
slideColor	String	滑动图标颜色（滑块内部图标）	#FFFFFF	-
zIndex	Number, String	验证弹层层级z-index值	996	-
maskBgColor	String	遮罩背景色	rgba(0,0,0,.6)	-
maskClosable	Boolean	点击遮罩是否可关闭验证弹框	false	-

//属性location 参数说明：
//注:裁剪图片尺寸默认宽高44px，以下单位均为px
//需要滑动的总距离为x1-x
{
	//裁剪下的小图片在背景图片中的left值
	x:20,
	//被裁剪位置在背景图片中的left值
	x1:200,
	//裁剪图片与被裁剪位置在背景图片中的top值
	y:20
}

//特别说明：
//x、x1、y应该均为在一定范围内随机产生，请参考js方法：
getRandom(min, max) {
	let range = Array.from(new Array(max + 1).keys()).slice(min);
	let index = Math.floor((Math.random() * range.length));
	return range[index]
},
//this.w 背景图片宽度，单位px、this.h 背景图片高度，单位px
//其中 44 为裁剪图片的宽高值，固定值，单位px
getXY() {
	// x大于等于20，小于等于宽度的一半减去44
	this.x = this.getRandom(20, this.w / 2 - 44)
	// y大于等于20，小于等于高度减去60（减去的值大于等于44即可）
	this.y = this.getRandom(20, this.h - 60)
	// x1大于宽度一半加上44，宽度减去60（减去的值大于等于44即可）
	this.x1 = this.getRandom(this.w / 2 + 44, this.w - 60)
}

Events

注：以下所有回调参数涉及单位的均为px

事件名	说明	回调参数
@success	验证成功时触发，仅前端验证时有效	-
@fail	验证失败时触发，仅前端验证时有效	{ times:验证失败次数 }
@init	初始化时触发，仅后端验证时使用	{ width : 背景图片宽度, height :背景图片高度 cutGraphWidth : 切割图片的宽高 }
@verify	待验证，仅后端验证时触发	{ x : 裁剪图片left值, x1 : 被裁位置left值 slipDistance : 滑动的距离 }

//特别说明：

当结合后端进行验证时，应该先通过 @init 事件获取到相应参数，然后请求后端接口获取位置信息以及背景图片。

@verify 事件返回用户操作后滑动的距离，传给后端进行验证。

//验证方法，参考js方法自行转为后端方法
//width为需要滑动的总距离
var width = x1 - x
//滑动距离 减去 总距离 的绝对值 小于等于误差范围即为验证通过
if (Math.abs(slipDistance - width) <= range) {
	ins.callMethod('success')
}

Methods

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

方法名	说明	传入参数	返回参数
show	打开验证框	refresh：Boolean值，是否刷新位置，仅type=1时有效	-
closeVerify	关闭验证框并重置验证，后端验证时使用	-	-
fail	验证失败时调用，重置验证，后端验证时使用	-	-