VUE验证码demo

VUE验证码demo

在这里插入代码片
<template>
	<div class="demotwo">
		<!--滑动验证码-->
		<div class="img_bg">
			<!--滑动容器-->
			<div class="sliderImg" style="width:360px;height:200px;position:relative;background:#fff;">
				<!--大图-->
<!--				<img :src="save_big_url" alt="" class="big_img" style="width:260px;height:160px;position:absolute;right:0">-->
				<img :src="'data:image/png;base64,'+save_big_url" alt="" class="big_img" style="width:260px;height:160px;position:absolute;right:0">
				<div ref="right" style="position:absolute;width:40px;height:40px;top:16px;left:280px;background-color:rgba(0,0,0,0.2);"></div>
				<!--小图-->
				<img :src="save_small_url"
					 alt="" class="small_img"
					 ref="small_img"
					 @mousedown="move"
					 style="position:absolute;width:40px;height:40px;top:16px;left:20px;cursor:crosshair;"
				>
				<p :style="Verification==1?'background:#55746c;':'background:#20af5c;'" style="width:360px;height:40px;position:absolute;right:0;bottom:0;line-height:40px;color:#fff;text-align: center;">
					{{Verification==1?'验证码未成功':'验证成功'}}
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import { baseurl2 } from '../config/urlconfig2.js';
	export default{
		name:'demotwo',
		//js
		data() {
			return {
				// isCheckImg: false,// 是否使用滑动验证码
				positionX: 0, // 滑动时小图相对大图的左边距
				positionY: 0, // 滑动时小图相对大图的上边距
				/* save_big_url: require('../assets/1.png'),//大图url
				save_small_url: require('../assets/2.png'),//小图url */
				save_big_url: '',//大图url
				save_small_url: '',//小图url
				Verification : 1 ,	//是否验证成功的背景颜色
				Verificationcode:1, //是否验证成功的文本
				tokens:'',
				imgwidth:0,
				imgheight:0,
				imgwidthxiao:0,
				imgheightxiao:0,
			}
		},
		mounted(){
			/* this.$refs.small_img.style.left=50 + 'px';
			this.$refs.small_img.style.top= 0 + 'px'
			console.log(this.$refs.small_img.style.left) */
			
			this.showImg();
		},
		methods:{
			// 渲染图片
			showImg() {
				// console.log(this.$refs.img1.$el)
				
				this.$axios.get(baseurl2+'/hdcaptcha/register','').then((res)=>{
					// console.log(this.$refs.img1.$el)
					// console.log('背景图片',res.data.data)
					this.save_big_url=res.data.data.bgImg;
					this.save_small_url=res.data.data.sliceImg;
					let that=this;
					this.$refs.img1.onload = function(){
						that.imgwidth=this.width;
						that.imgheight=this.height;
					}
					this.$refs.img2.onload = function(){
						that.imgwidthxiao=this.width;
						that.imgheightxiao=this.height;
					}
					setTimeout(() =>{
						var width1 = this.imgwidth; //大图实际宽度
						var height1 = this.imgheight; //大图实际宽度
						var width1s = Number(this.$refs.imgback.style.width.substring(0,this.$refs.imgback.style.width.length-2));//大图设定宽度
						var heigh1s = Number(this.$refs.imgback.style.height.substring(0,this.$refs.imgback.style.height.length-2));//大图设定高度
						// console.log(width1,height1,width1s,heigh1s)
						var width2 = this.imgwidthxiao; //小图实际宽度
						var height2 = this.imgheightxiao; //小图实际宽度
						
						/* console.log(width2,height2)
						console.log(width1s*width2/width1)
						console.log(heigh1s*height2/height1) */
						this.$refs.small_img.style.width=width1s*width2/width1 +'px';
						this.$refs.small_img.style.height=heigh1s*height2/height1 +'px';
						// var heightright=heigh1s*height2/height1; //小图按比例设定的高
						// console.log(res.data.data.y * heigh1s / height1)
						var heighttop=res.data.data.y * heigh1s / height1;
						this.$refs.small_img.style.top = heighttop + 'px';
					},100)
					
					// console.log(this.$refs.imgback.style.width)
					// this.$refs.small_img.style.top=res.data.data.y + 'px';
					this.tokens=res.data.data.token;
					/* this.$refs.small_img.style.left=50 + 'px';
					this.$refs.small_img.style.top=50 + 'px'; */
					// this.tokens=res.
				}).catch((res) =>{
					console.log(res)
					this.$message({
					  message: '背景图片错误',
					  type: 'warning',
					  showClose: true,
					  duration:0,
					});
				}) 
			},
			// 滑动验证码
			move(e) {
				let odiv = e.target;        //获取目标元素（小图）
				// console.log(e)
				//算出鼠标相对元素的位置
				let disX = e.clientX - odiv.offsetLeft;
				let disY = e.clientY - odiv.offsetTop;
				// 鼠标移动时
				document.onmousemove = (e) => {       //鼠标按下并移动的事件
					if (e.preventDefault) e.preventDefault();

					//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
					let left = e.clientX - disX;
					let top = e.clientY - disY;

					//绑定元素位置到positionX和positionY上面
					this.positionX = left;
					this.positionY = top;

					let bigImg = document.getElementsByClassName("sliderImg")[0];
					const bigX = bigImg.clientWidth - odiv.offsetWidth ;
					left = Math.min(Math.max(0, left), bigX);
					 //移动当前元素
					odiv.style.left = left + 'px';
				};

				// 鼠标按键释放时
				document.onmouseup = (e) => {
					if (e.stopPropagation) e.stopPropagation();
					if (e.preventDefault) e.preventDefault();
					e.cancelBubble = true;

					document.onmousemove = null;
					document.onmouseup = null;

					// 计算小图x值
					const xvalue = e.clientX - e.offsetX - document.getElementsByClassName("sliderImg")[0].getBoundingClientRect().x;
					var xvalues=xvalue-100;
					// console.log('x轴坐标---',xvalues);
					/* var rights=this.$refs.right.style.left;
					var rights2=Number(rights.substring(0,rights.length-2))-100;
					console.log(rights2) */
					// Math.abs()//绝对值
					// console.log(xvalue-100-rights2)
					//验证码接口
					var obj={
					    "accountName": 123,
					    "password": 123,
					    //"token":"d82c8d1619ad8176d665453cfb2e55f033",
						"token": this.tokens,
					    //"sliceX":81
						"sliceX": xvalues
					};
					var objjson=JSON.stringify(obj);
					this.$axios.post(baseurl2+'/hdcaptcha/check',objjson).then((res)=>{
						// console.log(res.data)
						if(res.code==200){
							this.Verification=2;
							this.Verificationcode=3;
						}else{
							this.Verificationcode=2;
							setTimeout(() =>{
								this.Verificationcode=1;
								this.$refs.small_img.style.left=20 + 'px';
								this.showImg();
							},1500)
						} 
					}).catch((res) =>{
						this.Verificationcode=2;
						setTimeout(() =>{
							this.Verificationcode=1;
							this.$refs.small_img.style.left=20 + 'px';
							this.showImg();
						},1320)
						
					})
				};
			}
		}
	}
</script>

<style>
	.demotwo {
		width: 100%;
		height: 100%;
		position:relative;
	}
	.img_bg{
		width:360px;
		height:200px;
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin: auto;
		background:#ccc;
		border:1px solid seagreen;
	}
</style>