vue前端人机验证vue-puzzle-vcode插件的使用教程
下载地址 github:https://github.com/javaLuo/vue-puzzle-vcode
Vue 纯前端的拼图人机验证、右滑拼图验证 我知道有第 3 方的很好用,比如 GEETEST 的拼图验证,但要引入 SDK 跟后台配合,还有接口交互。 本博客仅展示纯前端的简单滑动验证
动画演示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201124172642995.gif#pic_center)
安装
npm install vue-puzzle-vcode --save
使用
//中导入组件
import Vcode from "vue-puzzle-vcode";
components:{ Vcode }
//中使用组件
简单例子
//中
//data中
isShow:false,
//methods中
submitForm() {
this.isShow=true
},
//滑块验证成功
onSuccess(msg) {
this.isShow=false
//可以在此加上axios或其他代码
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201124165734397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pheV9DaG91MzQ1,size_16,color_FFFFFF,t_70#pic_center)
// 关闭滑块验证后提示用户取消验证
onClose() {
this.isShow=false
this.$message({
message: '取消验证!',
type: 'warning'
});
},
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201124165818191.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pheV9DaG91MzQ1,size_16,color_FFFFFF,t_70#pic_center)
|