建设信用卡秒批网站,vps网站搬家,外贸网站建设公司策划,赣州章贡区好玩的地方1、思路
1、在登录页面需要启动向右滑块验证
2、效果图 3、文章地址#xff1a;滑动验证码的实现-vue-simple-verify
2、成分分析
1、由三块构成#xff0c;分别是底部条、拖动条、拖动移动部分
2、底部条#xff1a;整体容器#xff0c;包括背景、边框和文字#xf…1、思路
1、在登录页面需要启动向右滑块验证
2、效果图 3、文章地址滑动验证码的实现-vue-simple-verify
2、成分分析
1、由三块构成分别是底部条、拖动条、拖动移动部分
2、底部条整体容器包括背景、边框和文字请按住滑块拖动到最右边
3、拖动条图片边框背景色即可
4、完成部分背景、边框和文字验证完成 3、事件分析
1、鼠标按下事件记录鼠标位置以及状态
2、鼠标移动事件计算滑块位置
3、鼠标离开事件更新状态至初始状态
4、鼠标抬起事件更新状态至初始状态
4、效果图 5、代码
1、SlideVerify.vue文件
templatedivrefsliderContainermousemoveonMouseMovemouseuponMouseUpclassslider-verify-containermouseleaveonMouseLeavespan v-ifblockState 0请按住滑块拖动到最右边/spandivmousedownonMouseDown:style{ left: leftP }classslider-verify-block/div :style{ width: leftP } classslider-verify-completespan v-ifblockState 2验证成功/span/div/div
/templatescript setup
import { ref, defineEmits } from vue;const emit defineEmits([success, failed]);const leftP ref(0);const blockState ref(0);const startP ref(undefined);const sliderContainer ref(undefined);
const onMouseDown (e) {if (blockState.value ! 2) {leftP.value 0;blockState.value 1;startP.value {clientX: e.clientX,};} else {leftP.value 0;blockState.value 0;}
};
const onMouseMove (e) {if (blockState.value 1) {let width e.clientX - startP.value.clientX;if (width 56 400) {leftP.value 400 - 56 px;blockState.value 2;emit(success);} else {leftP.value width px;}}
};
const onMouseUp (e) {if (blockState.value ! 2) {leftP.value 0;blockState.value 0;emit(failed);}
};
const onMouseLeave (e) {if (blockState.value ! 2) {leftP.value 0;blockState.value 0;emit(failed);}
};
/scriptstyle langscss scoped
.slider-verify-container {width: 100%;height: 56px;background-color: transparent;position: relative;border: solid 1px #20cccf;text-align: center;color: #20cccf;line-height: 56px;user-select: none;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;
}
.slider-verify-complete {width: 0;height: 56px;position: absolute;background-color: #00e6f14f;left: 0;top: 0;
}
.slider-verify-block {width: 56px;height: 56px;background-image: url(/assets/images/login6/arrow.png);background-color: white;position: absolute;left: 0;top: -1px;border: solid 1px #20cccf;background-size: 50%;background-repeat: no-repeat;background-position: center;
}
/style2、调用代码
slide-verify successonVerifySuccess failedonVerifyFailed /
