uniapp滑动图片验证

使用组件

<slider-verify :show="isShowSliderVerify" @sliderVerifySuccessHandle="sliderVerifySuccessHandle"></slider-verify>

组件

<template><view class="sliderVerify-shade" v-if="show"><view class="sliderVerify-wrap"><view class="refresh" @click="refresh"><image class="refreshImg" src="@/pagesB/static/slider/refresh.png"></image><text>刷新</text></view><view class="imgWrap"><image class="img" :src="src"></image><view class="over" :style="{left:left+'px',top:top+'px'}"></view><view class="smartImg" :style="{left:sleft+'px',top:stop+'px'}"><image class="simg" :style="{left:-left+'px',top:-top+'px'}" :src="src"></image></view></view><view class="sliderBox" @touchend="sliderEnd"><movable-area class="sliderF"><movable-view :animation="true" class="sliderS" :x="sliderx" direction="horizontal" @change="startMove"><image class="icon" src="@/pagesB/static/slider/rigth.png"></image></movable-view></movable-area><view class="bgC"><text>拖动滑块完成整块拼图</text><view class="bgC_left" :style="{width:backLeft+'px'}"></view></view></view></view>   </view>
</template><script>export default {name: 'slider-verify',props:{show:{type:Boolean,default:false}},watch:{show(){this.random()}},data() {return {left: 0,top: 0,sleft: 0,sleftDefault: 0,stop: 0,sliderx: 0,backLeft: 0,message: '',src:'',bgImg:require("@/pagesB/static/slider/slider.jpg"),//背景图片}},mounted() {this.random()},methods: {random() {let imgLegth=8;let ram = Math.random();this.left = Math.floor(80 * ram) + 140; //140-220this.top = this.stop = Math.floor(80 * ram) + 10;this.sleft = this.sleftDefault = Math.floor(70 * ram) + 10;if(Math.floor(imgLegth*ram)==8){this.src=this.bgImg;}else{this.src=this.bgImg;}this.sliderx = 1;setTimeout(() => {this.sliderx = 0;this.refreshStatus=false;}, 300)},refresh(){this.message='';this.random();},startMove(e) {this.backLeft = e.detail.x + 18;this.sleft = this.sleftDefault + e.detail.x;},sliderEnd() {if (Math.abs(this.sleft - this.left) <= 4) {this.message = '验证成功!';console.log("[验证成功]")this.$emit("sliderVerifySuccessHandle");} else {this.message = '验证失败，请重试';console.log("[验证失败，请重试]")setTimeout(() => {this.message = '';this.sliderx = 1setTimeout(() => {this.sliderx = 0}, 300)}, 1000)}}}}
</script><style lang="scss" scoped>.sliderVerify-shade{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 100;display: flex;justify-content: center;align-items: center;background-color: rgba(0,0,0,0.7);}.sliderVerify-wrap {position: relative;background: #fff;width: 300px;border-radius: 8px;overflow: hidden;.refresh{position: absolute;right: 30rpx;top: 124px;font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;z-index: 1;display: flex;flex-direction: row;justify-content: center;align-items: center;.refreshImg{transition: all 0.3s;width: 16px;height: 16px;margin-right: 5px;}}.imgWrap {position: relative;width: 280px;height: 150px;border-radius: 8px;margin: 0 auto;overflow: hidden;background: #ddd;margin-top: 9px;.img {display: block;width: 100%;height: 100%;}.over {position: absolute;left: 0;top: 0;width: 40px;height: 40px;background: #ddd;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);}.smartImg {position: absolute;z-index: 2;left: 0;top: 0;width: 40px;height: 40px;overflow: hidden;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);.simg {position: absolute;display: block;width: 280px;height: 150px;}}}}.sliderBox {width: 280px;margin: 20px auto;height: 22px;position: relative;.sliderF {width: 100%;height: 100%;z-index: 3;.sliderS {height: 36px;width: 36px;background: #EB4D4D;border-radius: 36px;display: flex;justify-content: center;align-items: center;margin-top: -8px;.icon {width: 20px;height: 20px;}}}.bgC {position: absolute;z-index: 1;left: 0;top: 50%;transform: translateY(-50%);width: 100%;height: 22px;border-radius: 22px;line-height: 22px;font-size: 14px;color: #666666;background-color: #E6E6E6;box-shadow: inset 0 0 4px #E6E6E6;text-align: center;overflow: hidden;}.bgC_left {position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 0;height: 22px;border-top-left-radius: 22px;border-bottom-left-radius: 22px;line-height: 22px;font-size: 14px;background-color: #EB4D4D;box-shadow: inset 0 0 4px #EB4D4D;text-align: center;}}
</style>

uniapp滑动图片验证相关推荐

vue中纯前端实现滑动图片验证的方式
Hello,大家好呀~ 众所周知,滑动图片验证一直是各类网站登录和注册的一种校验方式,是用来防止有人恶意使用脚本批量进行操作从而设置的一种安全保护方式. 一般而言,这种滑动图片验证是可以通过后端配合完 ...
滑动图片验证登录-java后端
1.生成前端小图片,以及对于大图片加背景颜色 package com.stock.core.util;import java.awt.BasicStroke; import java.awt.Colo ...
vue滑动图片验证的方式
本篇文章使用的是一款中间件第一步使用npm安装 npm install --save vue-monoplasty-slide-verify 在main.js中引用 import SlideVeri ...
WordPress登录注册评论滑动图片验证码插件腾讯云验证码(CAPTCHA)
为了网站安全我们一般会在登录页.注册页.评论页添加验证码功能,传统的验证码都是输入字母数字或加减法等,现在比较流行图片滑动验证码.最为关键的是腾讯云提供有图形验证(图片滑动验证码)服务器(一年内提供几 ...
[验证码识别技术]-初级的滑动式验证图片识别
初级的滑动式验证图片识别方案 1 abstract 验证码作为一种自然人的机器人的判别工具,被广泛的用于各种防止程序做自动化的场景中.传统的字符型验证安全性已经名存实亡的情况下,各种新型的验证码如雨后 ...
html四张图片拼图,js实现html滑动图片拼图验证
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码,供大家参考,具体内容如下 html: Document 向右滑动验证 css: *{ margin: 0; padding: 0; } ...
uni-app 压缩图片（base64上传）包含图片验证
第一步选择图片 data(){return{imageType: ['image/png', 'image/jpeg', 'image/jpg'],//图片验证类型} }uni.chooseImage ...
uniapp滑动验证
uniapp滑动验证效果图(已经封装成组件) use.vue <template><view ><sliderzz @change="change" ...
php画拼图滑动验证,滑动拼图验证
3.逻辑:底部滑块的拖动控制小拼图移动,当其左边距与切割位置x坐标一致,或在一定范围内,即为正确:难点在于切割出来拼图,这一步参考上面链接地址: 5.部分源码如下:/** * @name BlockI ...
前端使用滑块滑动进行验证的思路
今天研究了一下前端需要注册或者发送验证码之前等这些场景时,往往会用到的一个简单的滑块滑动验证,用于区分是否是真人用户,下面就来简单介绍一下这个思路. 下面就是一个简单的demo: 其中HTML和css ...

uniapp滑动图片验证

uniapp滑动图片验证

uniapp滑动图片验证相关推荐

最新文章

热门文章