纯前端滑块拼图验证组件（多端兼容）

因为没有使用dom节点，所以在uniapp上也是可以使用的，复制下面源代码，图片src对应修改下就能用了
**注意：**这个验证组件是纯前端组件，安全性较低，可以供学习使用，不建议项目中使用！！

效果图

源代码


<template><view class="independent" v-if="show"><viewv-if="refreshStatus"class="shuaxin iu-icon-refresh":style="{ transform: `rotate(-${rotate}deg)` }"@click="refresh"/><view class="imgWrap"><img class="img" :src="src" @error="imageError" /><view class="over" :style="{ left: left + 'px', top: top + 'px' }"></view><view class="smartImg" :style="{ left: sleft + 'px', top: stop + 'px' }"><img class="simg" :style="{ left: -left + 'px', top: -top + 'px' }" :src="src" /></view><transition name="iu-slider-success"><view v-if="!refreshStatus" class="mack" :style="{ color: acColor }"><image style="vertical-align: middle; width: 32rpx; height: 32rpx;" src="./Yes.png" />{{ ' ' + message }}</view><view v-if="message == '验证失败，请重试'" class="mack" :style="{ color: acColor }"><image style="vertical-align: middle; width: 32rpx; height: 32rpx;" src="./fail.png" />{{ ' ' + message }}</view></transition></view><view class="sliderBox" @touchend="sliderEnd"><movable-area class="sliderF"><movable-view:disabled="!refreshStatus":animation="true"class="sliderS":x="sliderx"direction="horizontal"@change="startMove"><image class="icon" src="./right.png" /></movable-view></movable-area><view class="bgC">拖动左边滑块完成上方拼图<view class="bgC_left" :style="{ width: backLeft + 'px' }"></view></view></view></view>
</template><script>
export default {name: 'Slider',props: {show: {type: Boolean,default: true}},watch: {show() {this.random();}},data() {return {isSuccess: false,refreshStatus: true,left: 0,top: 0,sleft: 0,stop: 0,sliderx: 0,backLeft: 0,bgC_color: '',message: '',acColor: '#333',src: '',rotateNum: 0,rotate: 0};},mounted() {this.random();},methods: {random() {let imgLegth = 8;let ram = Math.random();const index = Math.floor(ram * 3); // 选图this.left = Math.floor(80 * ram) + 140; // 140-220this.top = this.stop = Math.floor(80 * ram) + 10;this.src = `/static/sliderImg/${index}.png`;},refresh() {let rotateNum = this.rotateNum++;this.rotate = rotateNum * 360; // 刷新时选择读书this.message = '';this.random();},startMove(e) {if (!this.refreshStatus) return;this.backLeft = e.detail.x + 18;this.sleft = e.detail.x;},sliderEnd() {if (Math.abs(this.sleft - this.left) <= 5) {this.message = '验证成功!';this.refreshStatus = false;this.acColor = 'green';} else {this.message = '验证失败，请重试';this.acColor = 'red';setTimeout(() => {this.message = '';this.sliderx = 1;setTimeout(() => {this.sliderx = 0;}, 100);}, 1000);}},imageError(e) {console.error('image发生error事件，携带值为' + e.detail.errMsg);}}
};
</script><style lang="scss" scoped>
@mixin flexC {display: flex;align-items: center;justify-content: center;
}.independent {position: relative;background: #fff;width: 300px;border-radius: 8px;overflow: hidden;padding-bottom: 20px;.shuaxin {position: absolute;z-index: 1;right: 20rpx;width: 60rpx;height: 60rpx;line-height: 60rpx;text-align: center;transition: all 0.3s;}.title {width: 100%;height: 60px;font-size: 18px;color: #333;@include flexC;}.imgWrap {position: relative;width: 280px;height: 150px;border-radius: 8px;margin: 0 auto;overflow: hidden;background: #ddd;.mack {position: absolute;text-align: center;width: 100%;height: 25px;bottom: 0;background-color: #fff;opacity: 0.8;z-index: 10;}.img {display: block;width: 100%;height: 100%;}.over {position: absolute;left: 0;top: 0;width: 50px;height: 50px;background: #777;opacity: 0.5;box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.3);}.smartImg {position: absolute;z-index: 2;left: 0;top: 0;width: 50px;height: 50px;overflow: hidden;box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);.simg {position: absolute;display: block;width: 280px;height: 150px;}}}
}.sliderBox {width: 266px;margin: 10px 17px;height: 36px;position: relative;.sliderF {width: 100%;height: 100%;z-index: 3;.sliderS {height: 36px;width: 36px;background: #007cff;border-radius: 36px;display: flex;justify-content: center;align-items: center;.icon {width: 20px;height: 20px;}}}.bgC {position: absolute;z-index: 1;left: 0;top: 50%;transform: translateY(-50%);width: 100%;height: 30px;border-radius: 30px;line-height: 30px;font-size: 14px;color: #999999;box-shadow: inset 0 0 4px #ccc;text-align: center;overflow: hidden;}.bgC_left {position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 0;height: 28px;border-top-left-radius: 28px;border-bottom-left-radius: 28px;line-height: 28px;font-size: 14px;background-color: #eee;box-shadow: inset 0 0 4px #ccc;text-align: center;}
}
</style>

纯前端滑块拼图验证组件（多端兼容）相关推荐

Vue基于ElementUI组件实现滑块登录验证组件
引言在实际项目应用开发中,为了防止用户频繁发起登录请求,导致后端登录访问压力瞬时过大,我们可以设计一些验证规则防刷,最常见的方式是通过输入验证码的方式降低刷新频率,后台通过返回不同的验证码从而降低用 ...
jQuery滑块拼图验证插件
jQuery滑块拼图验证插件 jQuery拼图验证插件制作拖拽滑动条来拼图完成验证登录效果.完成拼图成功提示,错误提示重新再试.支持刷新图片拼图验证. 演示地址下载地址
Vue拼图验证组件（支持大小、形状、图片、偏差、范围的自定义）
vue-puzzle-verification 封装的一个用于登录验证的拼图的vue组件,使用了canvas画图和拖拽的一些技巧.支持大小.形状.图片.偏差.范围的自定义. 使用方法 npm i vu ...
vue3 滑块拼图验证登录(vue3-puzzle-vcode)
这里写自定义目录标题首先,我们项目中很多情况下会用到滑动图片验证登录 vue有一个插件可以满足我们的需求第一步先安装 npm install vue3-puzzle-vcode --save 第二 ...
Web前端登录拼图验证功能，看你是人还是机器
前言相信大家经常在各种网站上登录.注册.下发短信.活动等会看到,系统会弹出来一个滑块验证,让你把一个滑块滑到指定空缺的位置(还有其他种形式,比如按顺序点击文字或图案等等),系统会校验,校验正确则登录 ...
前端实现登录拼图验证
前言不知各位朋友现在在web端进行登录的时候有没有注意一个变化,以前登录的时候是直接账号密码通过就可以直接登录,再后来图形验证码,数字结果运算验证,到现在的拼图验证.这一系列的转变都是为了防止机器操 ...
js固定表格行列_纯前端表格控件SpreadJS V14.0发布：组件化编辑器+数据透视表
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
autojs遍历当前页面所有控件_纯前端表格控件SpreadJS V14.0发布：组件化编辑器+数据透视表 - 葡萄城开发工具...
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
纯前端表格控件SpreadJS V14.0发布：组件化编辑器+数据透视表
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
Vue+element登录页面实现拼图验证
Vue+element登录页面实现拼图验证需求分析一.导入二.验证的意义三.常规验证手段详细设计一.使用组件二.轮子已找好,开始拼凑效果展示结尾需求分析一.导入项目开发过程中, ...

纯前端滑块拼图验证组件（多端兼容）

效果图

源代码

纯前端滑块拼图验证组件（多端兼容）相关推荐

最新文章

热门文章