vue前端人机验证vue-puzzle-vcode插件的使用教程
下载地址
github:https://github.com/javaLuo/vue-puzzle-vcode
Vue 纯前端的拼图人机验证、右滑拼图验证
我知道有第 3 方的很好用,比如 GEETEST 的拼图验证,但要引入 SDK 跟后台配合,还有接口交互。
本博客仅展示纯前端的简单滑动验证
动画演示
安装
npm install vue-puzzle-vcode --save
使用
//<script>中导入组件
import Vcode from "vue-puzzle-vcode";
components:{ Vcode }
//<template>中使用组件
<Vcode :show="isShow" @success="success" @close="close" />
简单例子
//<template>中
<Vcode :show="isShow" @success="onSuccess()" @close="onClose()" />
//data中
isShow:false,
//methods中
submitForm() {
this.isShow=true
},
//滑块验证成功
onSuccess(msg) {
this.isShow=false
//可以在此加上axios或其他代码
}
// 关闭滑块验证后提示用户取消验证
onClose() {
this.isShow=false
this.$message({
message: '取消验证!',
type: 'warning'
});
},