SliderCaptcha 滑块拼图验证

从背景图裁切拼图，支持前端误差判断或将滑动距离交给服务端验证。

支持平台

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

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

基础用法

<!-- 拼图验证 -->
<fui-slider-captcha ref="captchaRef" :src="imageUrl" :imageType="1"
  @success="handleSuccess" @fail="handleFailure" />

在图片可访问后通过 this.$refs.captchaRef.show() 打开；服务端验证使用 type="2"，根据 init 和 verify 事件处理位置数据。

属性

属性	类型	说明	官网默认值
type	Number / String	1 前端验证、2 服务端验证	1
range	Number / String	前端验证允许误差，单位 px	3
location	Object	服务端模式下的裁切位置，包含 x、x1、y	{}
src	String	背景图片地址，必填	-
imageType	Number / String	1 网络图片、2 base64、3 本地图片	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
slideColor	String	滑动图标颜色	#FFFFFF
zIndex	Number / String	层级	996
maskBgColor	String	遮罩颜色	rgba(0,0,0,.6)
maskClosable	Boolean	点击遮罩是否关闭	false

事件

事件	说明	回调参数
success	前端模式验证成功	{}
fail	前端模式验证失败	{ times }
init	服务端模式初始化	{ width, height, cutGraphWidth }
verify	服务端模式请求验证	{ x, x1, slipDistance }
close	官网列出的关闭事件	当前本地源码未声明或触发

实例提供 show(refresh)、closeVerify()、fail()，本地源码还提供 success()。网络图片需确保可下载，H5 需满足跨域要求；本地额外的 descrSize 默认 36 rpx。

插槽

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