您现在的位置是：网站首页> 编程资料编程资料

vue实现图片滑动验证功能_vue.js_

2023-05-24 491人已围观

简介 vue实现图片滑动验证功能_vue.js_

图片滑动验证，是目前比较常见的验证方式，主要目的是防止用户利用机器人自动注册、登录、灌水。

目前vue技术日趋成熟，已经有专门针对图片滑动验证功能的插件了。具体使用方式如下：

1.安装插件——npm install --save vue-monoplasty-slide-verify

注意此处的--save也就是简化版的-s，是为了将下载的插件保存到package.json中的depencedies中，这样其他人在下载你的项目后，依然可以通过npm install将插件安装到node_modules.

2.在main.js中引入插件并绑定到vue上

import Vue from 'vue'; import SlideVerify from 'vue-monoplasty-slide-verify';   Vue.use(SlideVerify);

3.封装图片验证组件

4.父组件使用图片验证组件

import SlideVerify from "@/components/SlideVerify";//引入 export default {   name: "Redister",   components: {     SlideVerify,//注册组件   },   data(){       return{           isShowSlide:false       }   } }

在html中使用组件

对应的js部分：

hideSlide() {   setTimeout(() => {     this.isShowSlide = false;   }, 500); }, sendSmsCode() {     //此处的处理是：图片验证通过后，发送短信验证码，这个要根据具体情况单独处理   setTimeout(() => {     this.$api       .getSendForgetSmsCode({         mobile: this.form.account,       })       .then((res) => {         this.isShowSlide = false;         if (res.data.success) {           this.timeCountDown();           this.$message.success("短信验证码发送成功");         } else {           this.$message.error(res.data);         }       })       .catch((err) => {});   }, 500); },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：vue篇之事件总线EventBus使用示例详解_vue.js_

下一篇：vue+antd实现折叠与展开组件_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

vue实现图片滑动验证功能_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢