PuzzleVerify 滑块拼图验证

由服务端提供带缺口的背景图和拼图，滑动结束后由页面提交距离进行验证。

支持平台

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

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

基础用法

<!-- 服务端拼图验证 -->
<fui-puzzle-verify ref="puzzleRef" :src="backgroundImage" :cutSrc="pieceImage"
  @verify="handleVerify" />

通过 this.$refs.puzzleRef.show() 打开，handleVerify 接收滑动距离并交给服务端验证。

属性

属性	类型	说明	官网默认值
src	String	带缺口的背景图地址，必填	-
cutSrc	String	裁切拼图地址，必填	-
x	Number / String	拼图起始左偏移，单位 px	10
y	Number / String	拼图顶部偏移，单位 px	10
width	Number / String	背景图宽度，单位 px	300
height	Number / String	背景图高度，单位 px	150
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

事件

事件	说明	回调参数
init	验证组件初始化	{ cutGraphWidth }
verify	滑动结束，开始验证	{ slipDistance }

实例提供 show()、closeVerify()、reset()，本地源码还提供 success()。本地还提供官网未列出的 descrSize 属性，默认 36 rpx。

插槽

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