vue 行为验证码之滑动验证AJ-Captcha使用详解（vue滑块验证插件）满满干货

文章摘要

这篇文章介绍了如何使用JavaScript组件进行验证功能。文章详细说明了使用`Verify`组件的调用方式，包括两种模式：`mode="pop"`和`mode="fixed"`。在`mode="pop"`模式下，需要为组件添加`ref`并手动调用`show`方法；在`mode="fixed"`模式下则无需添加`ref`，也不需要调用`show`方法。此外，文章还提到组件的`success`回调函数用于接收二次验证参数，并将参数与登录参数一起回传给登录接口。整体内容简明扼要，突出核心验证操作。

<template>
<Verify
@success=”success” //验证成功的回调函数
:mode=”pop” //调用的模式
:captchaType=”blockPuzzle” //调用的类型点选或者滑动
:imgSize=”{ width: ‘330px’, height: ‘155px’ }” //图片的大小对象
ref=”verify”
></Verify>
//mode=”pop”模式
<button @click=”useVerify”>调用验证组件</button>
</template>
****注: mode为”pop”时,使用组件需要给组件添加ref值,并且手动调用show方法例: this.$refs.verify.show()****
****注: mode为”fixed”时,无需添加ref值,无需调用show()方法****
<script>
//引入组件
import Verify from “https://www.jb51.net/javascript//components/verifition/Verify”;
export default {
name: ‘app’,
components: {
Verify
}
methods:{
success(params){
// params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
},
useVerify(){
this.$refs.verify.show()
}
}
}
</script>