SlideVerify 滑动验证码

概述

SlideVerify 滑动验证码，根据提示进行行为验证。

温馨提示

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

支持平台

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

引入

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

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

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

第二种：easycom组件规范

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

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

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

代码演示

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

左下方动画

@success 事件当验证通过时触发，@fail 事件当验证失败时触发。

<fui-slide-verify @success="success" @fail="fail"></fui-slide-verify>

//methods
success() {
	this.fui.toast('验证通过！')
},
fail() {
	this.fui.toast('验证失败！')
}

调整样式

通过 background 属性设置滑动条背景色， activeBgColor 属性设置滑块滑过区域背景颜色，passColor 属性设置通过验证后滑块边框颜色以及对号图标颜色，lineColor 属性目标虚线框边框颜色。

<fui-slide-verify background="rgba(9, 190, 79, .05)" activeBgColor="#09BE4F" passColor="#09BE4F" lineColor="#FFB703" @success="success" @fail="fail"></fui-slide-verify>

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
range	Number, String	误差范围，距离目标（虚线框）位置偏差最大值，单位px	3	-
error	Number, String	验证失败多少次进行重置目标（虚线框）位置	3	-
width	Number, String	滑动条宽度，单位rpx	640	-
height	Number, String	滑动条高度，单位rpx	80	-
background	String	滑动条背景色	#EEEEEE	-
activeBgColor	String	滑块滑过区域背景颜色	#465CFF	非Nvue端默认为空，可通过css变量（--fui-color-primary）来改变颜色值
sliderWidth	Number, String	滑块宽度，单位rpx	80	-
sliderBgColor	String	滑块背景颜色	#FFFFFF	-
borderColor	String	滑块边框颜色	#EEEEEE	-
passColor	String	通过验证后滑块边框颜色以及对号图标颜色	#465CFF	非Nvue端默认为空，可通过css变量（--fui-color-primary）来改变颜色值
size	Number, String	提示文字大小，单位rpx	28	-
color	String	提示文字颜色	#333333	-
activeColor	String	验证通过后提示文字颜色	#FFFFFF	-
iconSize	Number, String	箭头与对号图标字体大小，单位rpx	48	-
arrowColor	String	箭头图标颜色	#B2B2B2	-
lineColor	String	目标虚线框边框颜色	#B2B2B2	-

Events

事件名	说明	回调参数
@success	验证通过时触发（滑块与虚线框重合偏差距离小于等于误差范围）	{ }
@fail	验证失败时触发（滑块与虚线框重合偏差距离大于误差范围）	{ }

Methods

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

方法名	说明	传入参数	返回参数
reset	重置滑动验证码	-	-

示例预览

示例代码地址

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

特别说明

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

开通会员 (opens new window)