vue前端人机验证vue-puzzle-vcode插件的的使用教程

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'
                });
            },