vue实现图片滑动验证功能—

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

目前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.封装图片验证组件

<template><slide-verify:l="42":r="10":w="310":h="155":imgs="picArray":show="false"slider-text="向右滑动完成验证"ref="slideverify"@success="onSuccess"@fail="onFail"@refresh="onRefresh"></slide-verify>
</template><script>
export default {name: "SliderVerify",data() {return {//在data中引入`assets`中的图片可以通过`require`的方式来引入picArray: [require("@/assets/verify/1.jpg"),require("@/assets/verify/2.jpg"),require("@/assets/verify/3.jpg"),require("@/assets/verify/4.jpg"),require("@/assets/verify/5.jpg"),require("@/assets/verify/6.jpg"),require("@/assets/verify/7.jpg"),require("@/assets/verify/8.jpg"),],};},methods: {onSuccess() {//往父级传递验证通过的函数this.$emit("success");},onReset() {//重置图片验证组件this.$refs.slideverify.reset();},onFail() {},onRefresh() {},},
};
</script>

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

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

在html中使用组件

<div class="slideverify" v-show="isShowSlide" @mouseleave="hideSlide"><SlideVerify ref="slideblock" @success="sendSmsCode"></SlideVerify>
</div>

对应的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实现图片滑动验证功能——功能实现相关推荐

Vue实现图片滑动验证
Vue实现图片滑动验证使用vue完成使用vue完成实习一个星期小白对工作安排的图片滑动验证分享 1.安装依赖附上:https://www.npmjs.com/package/vue-monop ...
基于Java实现图片滑动验证(包含前端代码)
前言 1.下面是一个效果展示: 2.先抱怨一下,在博客上面的抄袭真的非常严重,为了实现一个图片滑动验证,我搜索了挺久的资料,不过内容翻来覆去就是同样的内容,千篇一律,作者还各不相同:内容相同我就不多说 ...
Java滑动验证_java图片滑动验证（登录验证）原理与实现方法详解
本文实例讲述了java图片滑动验证(登录验证)原理与实现方法.分享给大家供大家参考,具体如下: 这是我简单做出的效果图,处理300X150px的校验图,并把图片发到前端,用时50毫秒左右,速度还是非常 ...
vue 登录模块滑动验证
vue 登录模块滑动验证借助阿里云云盾开发首先登陆账号开通验证码服务 https://yundun.console.aliyun.com/?spm=5176.2020520162.categori ...
安卓图片滑动验证模块
最近想把工作这两年的东西好好写一写,一直觉得自己好像没做什么东西一样,写一写也能给自己一点自信,当然更像是一次总结. 安卓滑动验证模块是去年一个需求做的,当时也只是从网上找了一个不错的博客 cv 大法 ...
vue封装图片滑块验证+读秒组件
我们在项目开发过程中经常会遇到用户发送验证码后唤起图片滑块验证,验证成功后触发发送验证码事件(不处理发送验证码逻辑父组件去监听)进而读秒等流程,特此封装了该组件. 1.html部分 <templ ...
vue 后台登录滑动验证
1.引入vue-monoplasty-slide-verify组件到项目里先使用命令行安装:npm install --save vue-monoplasty-slide-verify 2.在mai ...
php 图片滑动验证貳
tp6方式: 注意:验证后销毁保存的图片(背景图和滑动图) <?php declare (strict_types = 1);namespace app\index\controller;use ...
jquery 重写 html5 验证,Jquery前端滑动验证方式功能实现
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 使用说明: 1.引入drag.js和Jquery库文件: 2.引入css文件: .slidetounlock{ font-si ...

vue实现图片滑动验证功能——功能实现

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

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

3.封装图片验证组件

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

vue实现图片滑动验证功能——功能实现相关推荐

最新文章

热门文章

vue实现图片滑动验证功能——功能实现

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

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

3.封装图片验证组件

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

vue实现图片滑动验证功能——功能实现相关推荐

最新文章

热门文章

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

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