vue实现登录滑动拼图验证
本文实例为大家分享了vue实现登录滑动拼图验证的具体代码,供大家参考,具体内容如下
一、安装插件
npm install --save vue-monoplasty-slide-verify
二、main.js引入
import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼图验证码Vue.use(SlideVerify)
三、组件中使用 html(自定义关闭按钮,添加变量控制弹窗显隐)
【vue实现登录滑动拼图验证】js
return {msg: '',flag: false,}methods: {// 拼图成功onSuccess (){this.getLogin()},// 拼图失败onFail (){this.msg = ''},// 拼图刷新onRefresh (){this.msg = ''},// 登录请求接口getLogin () {const loginData = https://www.it610.com/article/{account:'',phone: this.ruleForm.userName,// Password: sha3.sha3_256(md5(this.ruleForm.password)), // 加密password: this.ruleForm.password,email: '',accountType: 2, // 登录类型手机号checkCode: ''}// 接口userLogin(loginData).then(res => {console.log(res)}).catch(res => {console.log(res)})},// 点击登录校验-拼图出现submitForm (formName) {// 表单校验this.$refs[formName].validate((valid) => {// 验证通过if (valid) {// 拼图出现this.flag = true} else {console.log('error submit!!')return false}})}}
四、效果
文章图片
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- vue|vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)
- 别再用 Redis List 实现消息队列了,Stream 专为队列而生
- Apache Pulsar 技术系列 - Pulsar事务实现原理
- Vue中使用watch同时监听多个值的实现方法
- vue实现登陆功能
- vue实现移动端可拖拽式icon图标
- Vue实现简单选项卡效果
- Python3|Python3 cpython优化 实现解释器并行
- 分析机器学习之决策树Python实现
- Vue3+Vite+TS实现二次封装element-plus业务组件sfasga