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

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

文章摘要

这篇文章介绍了如何使用JavaScript中的Verify组件进行验证操作。重点在于当`mode`设为`pop`时，需要为组件添加`ref`值，并手动调用`show()`方法（例如`this.$refs.verify.show()`），以实现组件的显示和互动。而当`mode`为`fixed`时，无需添加`ref`值，也不需要调用`show()`方法。文章强调了在不同模式下使用组件的正确方法，并提供了示例代码供参考。

<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>