背景

在做前端項(xiàng)目開(kāi)發(fā)的時(shí)候，少不了登錄注冊(cè)部分，既然有登錄注冊(cè)就少不了機(jī)器人驗(yàn)證，驗(yàn)證的方法有很多種，比如短信驗(yàn)證碼、郵箱驗(yàn)證碼、圖片滑動(dòng)、圖片驗(yàn)證碼等。

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

組件用vue3寫(xiě)的，如果是原生的話(huà)需要自行轉(zhuǎn)換一下。

代碼

代碼寫(xiě)的有一段時(shí)間了，由于鄙人英語(yǔ)撇腳，所以先奉上結(jié)構(gòu)說(shuō)明圖便于理解HTML結(jié)構(gòu)

<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"); //滑動(dòng)的缺失塊var qkimg = qk.children[0]; //缺失塊里面的imDOMvar kk = document.querySelector(".kongkuai"); //空白半透明的塊var kleft = Math.floor(Math.random() * (210 - 100 + 1)) + 100; //空的方塊的位置隨機(jī)數(shù)kk.style.left = kleft + "px"; //初始化空塊的位置qkimg.style.left = -kleft + "px"; //初始化滑動(dòng)塊的圖片位置//console.log('##',imgurll.value);//鼠標(biāo)拖動(dòng)滑塊的事件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;}};};// 在其他位置抬起鼠標(biāo)依舊判斷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;};//鼠標(biāo)滑動(dòng)完成鼠標(biāo)抬起之后的位置判斷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;};});//獲取圖片，圖片接口的話(huà)這里你們可以去網(wǎng)上找免費(fèi)的，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/分類(lèi).png) no-repeat 8px 10px/30px;position: relative;
}
</style>

效果圖

展示網(wǎng)站

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

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