日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

按住左邊滑塊 成上方拼圖( 三 )

云知道成上方拼圖


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=\”關(guān)閉驗證碼\”
@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軸數(shù)據(jù)
slider: {
mx: 0,
bx: 0
},
//拼圖是否正確
puzzle: false
};
},
watch: {
visible(e) {
if (e === true) {
this.canvasInit();
this.puzzle = false;
}
}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
methods: {
//拼圖驗證碼初始化
canvasInit() {
//生成指定區(qū)間的隨機(jī)數(shù)
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);
},
//鼠標(biāo)按下
drag(e) {
console.log(\”鼠標(biāo)按下\”, e);
let dom = e.target; //dom元素
let slider = document.querySelector(\”#sliderBlock\”); //滑塊dom
const downCoordinate = { x: e.x, y: e.y };
//正確的滑塊數(shù)據(jù)
let checkx = Number(this.slider.mx) – Number(this.slider.bx);
//x軸數(shù)據(jù)
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;
//允許正負(fù)誤差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);

推薦閱讀