背景

在做前端項目開發(fā)的時候，少不了登錄注冊部分，既然有登錄注冊就少不了機器人驗證，驗證的方法有很多種，比如短信驗證碼、郵箱驗證碼、圖片滑動、圖片驗證碼等。

由于鄙人在開發(fā)中涉及到圖片滑動驗證，找來找去，找不到滿意的輪子，同時組件庫里也沒有，于是一怒之下自己手搓了一個。各種功能實現(xiàn)的也還可以，夠用。

組件用vue3寫的，如果是原生的話需要自行轉換一下。

代碼

代碼寫的有一段時間了，由于鄙人英語撇腳，所以先奉上結構說明圖便于理解HTML結構

<template><div class="outer"><div class="img-out"><img :src="imgurll" alt="" /><p class="quekuai"><img :src="imgurll" alt="" /></p><p class="kongkuai"></p></div><div class="huadongtiao"><p class="huadongkuai" ref="hdk"></p></div></div>
</template><script>
import axios from "axios";
import { reactive, ref, onMounted } from "vue";
export default {name: "SliderShou",emits: ["success"],setup(props, context) {var imgurll = ref("");getUrl().then((val) => {imgurll.value = val;});onMounted(function () {var hdk = document.querySelector(".huadongkuai"); //下方的滑塊var qk = document.querySelector(".quekuai"); //滑動的缺失塊var qkimg = qk.children[0]; //缺失塊里面的imDOMvar kk = document.querySelector(".kongkuai"); //空白半透明的塊var kleft = Math.floor(Math.random() * (210 - 100 + 1)) + 100; //空的方塊的位置隨機數(shù)kk.style.left = kleft + "px"; //初始化空塊的位置qkimg.style.left = -kleft + "px"; //初始化滑動塊的圖片位置//console.log('##',imgurll.value);//鼠標拖動滑塊的事件hdk.onmousedown = function (e) {e = window.e || e;hdk.style.transition = "0s";qk.style.transition = "0s";var yleft = e.clientX;document.body.onmousemove = function (e) {e = window.e || e;hdk.style.left = e.clientX - yleft + "px";qk.style.left = e.clientX - yleft + "px";if (e.clientX - yleft < 0 || e.clientX - yleft > 250) {hdk.style.transition = "0.4s";qk.style.transition = "0.4s";hdk.style.left = "0px";qk.style.left = "0px";document.body.onmousemove = null;}};};// 在其他位置抬起鼠標依舊判斷document.body.onmouseup = function () {if (kleft - parseFloat(qk.style.left) < 10 &&kleft - parseFloat(qk.style.left) > -10) {context.emit("success");getUrl().then((val) => {imgurll.value = val;});} else {hdk.style.left = "0px";qk.style.left = "0px";}document.body.onmousemove = null;};//鼠標滑動完成鼠標抬起之后的位置判斷hdk.onmouseup = function () {if (kleft - parseFloat(qk.style.left) < 10 &&kleft - parseFloat(qk.style.left) > -10) {context.emit("success");getUrl().then((val) => {imgurll.value = val;});} else {hdk.style.left = "0px";qk.style.left = "0px";}document.body.onmousemove = null;};});//獲取圖片，圖片接口的話這里你們可以去網(wǎng)上找免費的，async function getUrl() {let imgurl = "";await axios({method: "get",// headers:{//   ContentType: "application/json",//   "Access-Control-Allow-Origin": "*",// },ContentType: "application/x-www-form-urlencoded;charset-utf-8",url: "圖片接口",}).then((res) => {imgurl = "https://www.asongaishuijiao.com" + res.data.image_url;});return imgurl;}function callback(e, yjl) {e = window.e || e;var hdk = document.querySelector(".huadongkuai");}return {callback,imgurll,};},
};
</script><style scoped>
.outer {width: 300px;margin: 0px auto;height: 100%;padding-top: 200px;
}
.img-out {width: 300px;height: 200px;background-color: rgb(202, 202, 202);position: relative;border: 2px solid rgb(211, 211, 211);box-shadow: 0 0 2px 0 rgb(198, 198, 198);
}
.img-out > img {height: 100%;width: 100%;
}
.img-out .quekuai {position: absolute;width: 50px;height: 50px;background: url() 100px -50px/300px 200px;top: 50px;z-index: 100;overflow: hidden;
}
.img-out .kongkuai {width: 50px;height: 50px;position: absolute;background-color: rgba(255, 255, 255, 0.5);top: 50px;left: 200px;z-index: 90;
}
.quekuai img {width: 300px;height: 200px;position: absolute;top: -50px;
}
.huadongtiao {height: 50px;width: 300px;background-color: rgb(239, 239, 239);margin-top: 30px;
}
.huadongtiao .huadongkuai {width: 50px;height: 50px;background: rgb(193, 193, 193) url(../assets/分類.png) no-repeat 8px 10px/30px;position: relative;
}
</style>

效果圖

展示網(wǎng)站

上面的組件代碼是我開發(fā)的一個網(wǎng)站使用的，網(wǎng)站主要也是給IT程序員使用的，內(nèi)容主打一個項目流程，如果你想找一個項目的開發(fā)流程或者說想發(fā)布自己項目的開發(fā)流程都可以去網(wǎng)站上看看，另外網(wǎng)站還可以附帶項目代碼。

👉網(wǎng)站鏈接奉上: xinxincode