Vue实现图片滑动验证

使用vue完成

使用vue完成

实习一个星期小白对工作安排的图片滑动验证分享

1.安装依赖附上：https://www.npmjs.com/package/vue-monoplasty-slide-verify/v/1.1.2

npm install --save vue-monoplasty-slide-verify

2.main.js中引入

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

3.创建子组件

<template><div>//el-dialog element-ui中引入的组件  对话框//visible.sync属性了解于elmentui中对话框介绍<el-dialog :visible.sync="outerVisible"><slide-verifyref="slideblock"@again="onAgain"@fulfilled="onFulfilled"@success="onSuccess"@fail="onFail"@refresh="onRefresh":slider-text="text":accuracy="accuracy"></slide-verify><button @click="handleClick">在父组件可以点我刷新哦</button><div>{{ msg }}</div></el-dialog></div>
</template><script>
export default {name: 'App',data() {return {msg: '',text: '向右滑动->',outerVisible: false,// 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5accuracy: 5,}},methods: {onSuccess() {console.log('验证通过')this.msg = 'login success'//滑动验证成功之后关闭弹出的窗口this.outerVisible = falsethis.$refs.slideblock.reset()},onFail() {console.log('验证不通过')this.msg = ''},onRefresh() {console.log('点击了刷新小图标')this.msg = ''},onFulfilled() {console.log('刷新成功啦！')},onAgain() {console.log('检测到非人为操作的哦！')this.msg = 'try again'// 刷新this.$refs.slideblock.reset()},handleClick() {this.$refs.slideblock.reset()},},
}
</script>

4.创建父组件

<template><div><button @click="btn">验证</button>//引入子组件<page-slide ref="child"></page-slide></div>
</template><script>
//引入子组件
import Slide from '@/components/Slide/Slide'export default {data() {return {outerVisible: false,}},components: {//引入子组件，子组件命名'page-slide': Slide,},methods: {btn() {//$refs获取在子组件的属性和方法，子组件需定义ref，child就是在子组件中定义的refthis.$refs.child.outerVisible = true},},}
</script><style>
</style>

验证成功之后就会关闭弹窗，弹窗改变可以去elementui中的对话框中查看介绍，并加以修改，我是只是简单的引用一下弹窗功能。
引入element-ui和安装依赖后，代码直接复制就可以使用

特别简单

还可以用腾讯云里的滑动验证，也是特别方便，但是收费，有两万次免费使用但是期限1年

这就是我的一些分享，只是自己简单的想法，小白一枚，希望得到更好的建议

Vue实现图片滑动验证相关推荐

vue实现图片滑动验证功能——功能实现
图片滑动验证,是目前比较常见的验证方式,主要目的是防止用户利用机器人自动注册.登录.灌水. 目前vue技术日趋成熟,已经有专门针对图片滑动验证功能的插件了.具体使用方式如下: 1.安装插件--npm ...
Java滑动验证_java图片滑动验证（登录验证）原理与实现方法详解
本文实例讲述了java图片滑动验证(登录验证)原理与实现方法.分享给大家供大家参考,具体如下: 这是我简单做出的效果图,处理300X150px的校验图,并把图片发到前端,用时50毫秒左右,速度还是非常 ...
vue 登录模块滑动验证
vue 登录模块滑动验证借助阿里云云盾开发首先登陆账号开通验证码服务 https://yundun.console.aliyun.com/?spm=5176.2020520162.categori ...
基于Java实现图片滑动验证(包含前端代码)
前言 1.下面是一个效果展示: 2.先抱怨一下,在博客上面的抄袭真的非常严重,为了实现一个图片滑动验证,我搜索了挺久的资料,不过内容翻来覆去就是同样的内容,千篇一律,作者还各不相同:内容相同我就不多说 ...
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 ...
安卓图片滑动验证模块
最近想把工作这两年的东西好好写一写,一直觉得自己好像没做什么东西一样,写一写也能给自己一点自信,当然更像是一次总结. 安卓滑动验证模块是去年一个需求做的,当时也只是从网上找了一个不错的博客 cv 大法 ...
Vue实现图形滑动验证
最近在项目中使用到图形验证来避免用户过多的重复操作,此功能没有使用到后端,单纯的前端实现,由于自己写的话时间来不及,所以这里用到了vue的组件库 vue-monoplasty-slide-verify ...

Vue实现图片滑动验证

Vue实现图片滑动验证

使用vue完成

Vue实现图片滑动验证相关推荐

最新文章

热门文章