您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“vue怎么實現(xiàn)滑動解鎖功能”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue怎么實現(xiàn)滑動解鎖功能”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
效果如下
話不多說,直接上代碼;
<template> <div> <div id="box"> <div class="bgColor"></div> <div class="txt">滑動解鎖</div> <!--給i標(biāo)簽添加上相應(yīng)字體圖標(biāo)的類名即可--> <div class="slider"> <i v-show="!isSuccess" class="el-icon-d-arrow-right"></i> <i v-show="isSuccess" class="el-icon-check"></i> </div> </div> </div> </template> <script> export default { mounted() { var self = this; //一、定義了一個獲取元素的方法 function getEle(selector) { return document.querySelector(selector); } //二、獲取到需要用到的DOM元素 var box = getEle("#box"), //容器 bgColor = getEle(".bgColor"), //背景色 txt = getEle(".txt"), //文本 slider = getEle(".slider"), //滑塊 icon = getEle(".slider>i"), successMoveDistance = box.offsetWidth - slider.offsetWidth, //解鎖需要滑動的距離 downX; //用于存放鼠標(biāo)按下時的位置 //三、給滑塊添加鼠標(biāo)按下事件 slider.onmousedown = mousedownHandler; slider.ontouchstart = mousedownHandler; //移動端加touchstart事件 //3.1鼠標(biāo)按下事件的方法實現(xiàn) function mousedownHandler(e) { bgColor.style.transition = ""; slider.style.transition = ""; var e = e || window.event || e.which; downX = e.clientX ? e.clientX : e.changedTouches[0].clientX; if (!self.isSuccess) { //在鼠標(biāo)按下時,分別給鼠標(biāo)添加移動和松開事件 document.onmousemove = mousemoveHandler; document.onmouseup = mouseupHandler; //添加移動端對應(yīng)事件 document.ontouchmove = mousemoveHandler; document.ontouchend = mouseupHandler; } } //四、定義一個獲取鼠標(biāo)當(dāng)前需要移動多少距離的方法 function getOffsetX(offset, min, max) { if (offset < min) { offset = min; } else if (offset > max) { offset = max; } return offset; } //3.1.1鼠標(biāo)移動事件的方法實現(xiàn) function mousemoveHandler(e) { var e = e || window.event || e.which; var moveX = e.clientX ? e.clientX : e.changedTouches[0].clientX; console.log(moveX); var offsetX = getOffsetX(moveX - downX, 0, successMoveDistance); bgColor.style.width = offsetX + "px"; slider.style.left = offsetX + "px"; if (offsetX == successMoveDistance) { success(); } //如果不設(shè)置滑塊滑動時會出現(xiàn)問題(目前還不知道為什么) e.preventDefault(); } //3.1.2鼠標(biāo)松開事件的方法實現(xiàn) function mouseupHandler(e) { if (!self.isSuccess) { bgColor.style.width = 0 + "px"; slider.style.left = 0 + "px"; bgColor.style.transition = "width 0.5s linear"; slider.style.transition = "left 0.5s linear"; } document.onmousemove = null; document.onmouseup = null; //移除移動端事件 document.ontouchmove = null; document.ontouchend = null; } //五、定義一個滑塊解鎖成功的方法 function success() { self.isSuccess = true; txt.innerHTML = "解鎖成功"; bgColor.style.backgroundColor = "lightgreen"; //滑動成功時,移除鼠標(biāo)按下事件和鼠標(biāo)移動事件 slider.onmousedown = null; document.onmousemove = null; //移除移動端事件 document.ontouchstart = null; document.ontouchmove = null; } }, data() { return { isSuccess: false, }; }, }; </script> <style> /* 使用全局樣式樣式去掉 */ * { touch-action: pan-y; } </style> <style> #box { position: relative; width: 300px; height: 40px; margin: 0 auto; margin-top: 10px; background-color: #e8e8e8; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); } .bgColor { position: absolute; left: 0; top: 0; width: 40px; height: 40px; background-color: lightblue; } .txt { position: absolute; width: 100%; height: 40px; line-height: 40px; font-size: 14px; color: #000; text-align: center; } .slider { position: absolute; left: 0; top: 0; width: 50px; height: 40px; /* border: 1px solid #ccc; */ background: #fff; text-align: center; cursor: move; } .slider > i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>
讀到這里,這篇“vue怎么實現(xiàn)滑動解鎖功能”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。