按住左边滑块成上方拼图( 三 ) _云知道

trigger=\”manual\”
v-model=\”visible\”
>
<div class=\”sliding-pictures\”>
<div class=\”vimg\”>
<canvas id=\”sliderBlock\”></canvas>
<canvas id=\”codeImg\”></canvas>
</div>
<div class=\”slider\”>
<div class=\”track\” :class=\”{ pintuTrue: puzzle }\”>
{{ tips }}
</div>
<div class=\”button el-icon-s-grid\” @mousedown.prevent=\”drag\”></div>
</div>
<div class=\”operation\”>
<span
title=\”关闭验证码\”
@click=\”visible = false\”
class=\”el-icon-circle-close\”
></span>
<span
title=\”刷新验证码\”
@click=\”canvasInit\”
class=\”el-icon-refresh-left\”
></span>
</div>
</div>
</el-popover>
</div>
</template>
<script>
export default {
name: \”login\”,
data() {
return {
tips: \”拖动左边滑块完成上方拼图\”,
logindata: {
userName: \”\”,
password: \”\”,
verificationCode: \”\”
},
rules: {},
visible: false,
//滑块x轴数据
slider: {
mx: 0,
bx: 0
},
//拼图是否正确
puzzle: false
};
},
watch: {
visible(e) {
if (e === true) {
this.canvasInit();
this.puzzle = false;
}
}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
methods: {
//拼图验证码初始化
canvasInit() {
//生成指定区间的随机数
const random = (min, max) => {
return Math.floor(Math.random() * (max – min + 1) + min);
};
//x: 254, y: 109
let mx = random(127, 244),
bx = random(10, 128),
y = random(10, 99);
this.slider = { mx, bx };
this.draw(mx, bx, y);
},
//鼠标按下
drag(e) {
console.log(\”鼠标按下\”, e);
let dom = e.target; //dom元素
let slider = document.querySelector(\”#sliderBlock\”); //滑块dom
const downCoordinate = { x: e.x, y: e.y };
//正确的滑块数据
let checkx = Number(this.slider.mx) – Number(this.slider.bx);
//x轴数据
let x = 0;
const move = moveEV => {
x = moveEV.x – downCoordinate.x;
//y = moveEV.y – downCoordinate.y;
if (x >= 251 || x <= 0) return false;
dom.style.left = x + \”px\”;
//dom.style.top = y + \”px\”;
slider.style.left = x + \”px\”;
};
const up = () => {
document.removeEventListener(\”mousemove\”, move);
document.removeEventListener(\”mouseup\”, up);
dom.style.left = \”\”;
console.log(x, checkx);
let max = checkx – 5;
let min = checkx – 10;
//允许正负误差1
if ((max >= x && x >= min) || x === checkx) {
console.log(\”滑动解锁成功\”);
this.puzzle = true;
this.tips = \”验证成功\”;
setTimeout(() => {
this.visible = false;
}, 500);
} else {
console.log(\”拼图位置不正确\”);
this.tips = \”验证失败，请重试\”;
this.puzzle = false;
this.canvasInit();
}
};
document.addEventListener(\”mousemove\”, move);

按住左边滑块成上方拼图( 三 )

推荐阅读

战双帕弥什福禄献礼活动介绍战双福禄献礼攻略

肉反复解冻2次能吃吗肉反复解冻2次吃了要紧吗

京东怎样支付宝支付京东支付宝怎么支付

红旗HS7用的什么发动机

吹不散眉弯讲什么

往返两趟是几次

怀念以前的时光的短句回忆过去的经典短句

牡丹花什么季节开花

2022女生签名森系小清新语录零碎的岛屿会找到海

月嫂资格证怎么考

为了仅存的情怀，T3我必须要买。

口罩ce认证是什么认证

安徽教育招生考试院官网，请问安徽教育招生考试院在哪里

川北医学院教务管理系统，川北医学院普外胃肠肛肠科在新区还是老区

劳动能力鉴定需要多久呢

伏特加怎么喝

按住左边滑块 成上方拼图( 三 )

推荐阅读

按住左边滑块成上方拼图( 三 )