|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp">
|
|
|
|
|
|
|
+ <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
|
|
|
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
|
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
|
|
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
|
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
|
|
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
|
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
|
@@ -18,7 +18,8 @@
|
|
|
import { getVerifyImg, postVerifyImg } from './verify.js';
|
|
import { getVerifyImg, postVerifyImg } from './verify.js';
|
|
|
export default {
|
|
export default {
|
|
|
props: {
|
|
props: {
|
|
|
- verifyType: { // 验证方式,登录,注册等
|
|
|
|
|
|
|
+ // 传入数据,判断是登录、注册、修改密码
|
|
|
|
|
+ verifyType: {
|
|
|
defalut: 'LOGIN',
|
|
defalut: 'LOGIN',
|
|
|
type: String
|
|
type: String
|
|
|
}
|
|
}
|
|
@@ -38,15 +39,17 @@ export default {
|
|
|
distance: 0, // 拼图移动距离
|
|
distance: 0, // 拼图移动距离
|
|
|
flag: false, // 判断滑块是否按下
|
|
flag: false, // 判断滑块是否按下
|
|
|
downX: 0, // 鼠标按下位置
|
|
downX: 0, // 鼠标按下位置
|
|
|
- bgColor: 'aqua', // 滑动背景颜色
|
|
|
|
|
|
|
+ bgColor: '#04ad11', // 滑动背景颜色
|
|
|
verifyText: '拖动滑块解锁' // 文字提示
|
|
verifyText: '拖动滑块解锁' // 文字提示
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ // 鼠标按下事件,开始拖动滑块
|
|
|
mouseDown (e) {
|
|
mouseDown (e) {
|
|
|
this.downX = e.clientX;
|
|
this.downX = e.clientX;
|
|
|
this.flag = true;
|
|
this.flag = true;
|
|
|
},
|
|
},
|
|
|
|
|
+ // 鼠标移动事件,计算距离
|
|
|
mouseMove (e) {
|
|
mouseMove (e) {
|
|
|
if (this.flag) {
|
|
if (this.flag) {
|
|
|
let offset = e.clientX - this.downX;
|
|
let offset = e.clientX - this.downX;
|
|
@@ -60,6 +63,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ // 鼠标抬起事件,验证是否正确
|
|
|
mouseUp () {
|
|
mouseUp () {
|
|
|
if (!this.flag) return false;
|
|
if (!this.flag) return false;
|
|
|
this.flag = false;
|
|
this.flag = false;
|
|
@@ -83,17 +87,22 @@ export default {
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
- refresh () {
|
|
|
|
|
|
|
+ refresh () { // 刷新滑块
|
|
|
this.flag = false;
|
|
this.flag = false;
|
|
|
this.downX = 0;
|
|
this.downX = 0;
|
|
|
this.distance = 0;
|
|
this.distance = 0;
|
|
|
- this.bgColor = 'aqua';
|
|
|
|
|
|
|
+ this.bgColor = '#04ad11';
|
|
|
this.verifyText = '拖动滑块解锁';
|
|
this.verifyText = '拖动滑块解锁';
|
|
|
- this.getImg();
|
|
|
|
|
|
|
+ this.init();
|
|
|
},
|
|
},
|
|
|
- getImg () {
|
|
|
|
|
|
|
+ init () { // 初始化数据
|
|
|
getVerifyImg(this.type).then(res => {
|
|
getVerifyImg(this.type).then(res => {
|
|
|
- this.data = res.result;
|
|
|
|
|
|
|
+ if (res.result) {
|
|
|
|
|
+ this.data = res.result;
|
|
|
|
|
+ this.show = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$Message.warning('请求失败请重试!')
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -102,11 +111,7 @@ export default {
|
|
|
immediate: true,
|
|
immediate: true,
|
|
|
handler: function (v) {
|
|
handler: function (v) {
|
|
|
this.type = v;
|
|
this.type = v;
|
|
|
- // this.refresh();
|
|
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
- show (v) {
|
|
|
|
|
- if (v) this.refresh();
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
@@ -140,7 +145,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.handle {
|
|
.handle {
|
|
|
- border: 1px solid rgb(134, 134, 134);
|
|
|
|
|
|
|
+ border: 1px solid #e4dede;
|
|
|
margin-top: 5px;
|
|
margin-top: 5px;
|
|
|
height: 42px;
|
|
height: 42px;
|
|
|
background: #ddd;
|
|
background: #ddd;
|
|
@@ -153,7 +158,7 @@ export default {
|
|
|
width: 40px;
|
|
width: 40px;
|
|
|
height: 40px;
|
|
height: 40px;
|
|
|
opacity: 0.5;
|
|
opacity: 0.5;
|
|
|
- background: aqua;
|
|
|
|
|
|
|
+ background: #04ad11;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.swiper {
|
|
.swiper {
|