vue實(shí)現(xiàn)移動滑塊驗(yàn)證

更新時間：2022年03月08日 09:29:35 作者：m0_45986724

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)移動滑塊驗(yàn)證的具體代碼，供大家參考，具體內(nèi)容如下

記錄一下今天的學(xué)習(xí)內(nèi)容

<div class="solidBox" :class="{'solidBox1': validation}">
? ? <div @mousedown="solidStar" class="solid" :class="{'solid1': validation}"></div>
? ? {{!validation? textStart : textEnd}}
</div>

.solidBox {
? ? ? ? ? position: relative;
? ? ? ? ? display: flex;
? ? ? ? ? justify-content: center;
? ? ? ? ? align-items: center;
? ? ? ? ? margin: 20px 0;
? ? ? ? ? width: 100%;
? ? ? ? ? height: 35px;
? ? ? ? ? background-color: #999999;
? ? ? ? ? .solid {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? width: 35px;
? ? ? ? ? ? height: 35px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? border: 1px solid #666666;
? ? ? ? ? ? background: url("/img/切圖2/arrow2.png") center no-repeat;
? ? ? ? ? ? background-color: #ffffff;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? }
? ? ? ? ? .solid1 {
? ? ? ? ? ? background: url("/img/切圖2/ok.png") center no-repeat;
? ? ? ? ? ? background-size: 100%;
? ? ? ? ? ? border: 1px solid #358097;
? ? ? ? ? }
? ? ? ? }
? ? ? ? .solidBox1 {
? ? ? ? ? color: #ffffff;
? ? ? ? ? background-color: #1aad19;
? ? ? ? }

方法寫在methods里面

//鼠標(biāo)按下時
solidStar(e) {
? ? ? // console.log(e);
? ? ? // 獲取當(dāng)前DOM元素寬度 鼠標(biāo)當(dāng)前點(diǎn)擊位置
? ? ? let solidDom = e.target;
? ? ? let moveStart = e.clientX;
? ? ? let solidDomWith = solidDom.offsetWidth;
? ? ? // 父節(jié)點(diǎn)減去滑塊寬度獲取滑塊最大移動距離
? ? ? let MaxW = e.path[1].clientWidth - solidDomWith;
? ? ? // 設(shè)置判斷條件 防止驗(yàn)證成功后鼠標(biāo)移動方法繼續(xù)被調(diào)用
? ? ? if (this.validation === true) {
? ? ? ? return false;
? ? ? }
? ? ? // 鼠標(biāo)移動
? ? ? (document.onmousemove = e => {
? ? ? ? // 獲取移動時鼠標(biāo)距離瀏覽器左上角到當(dāng)前位置的X軸距離
? ? ? ? let endX = e.clientX;
? ? ? ? // 從上面獲取到的數(shù)據(jù)計(jì)算出鼠標(biāo)移動的距離
? ? ? ? this.moveX = endX - moveStart;
? ? ? ? // 判斷如果用戶反方向移動將移動距離賦值為零
? ? ? ? if (this.moveX <= 0) {
? ? ? ? ? this.moveX = 0;
? ? ? ? }
? ? ? ? // 判斷如果滑塊移動距離大于最大寬度 ?給其賦值最大寬度
? ? ? ? if (this.moveX >= MaxW) {
? ? ? ? ? this.moveX = MaxW;
? ? ? ? }
? ? ? ? // 為了更好地體驗(yàn) 寫上動畫 要不都不寫 ?不然其他動畫會覆蓋向右拖拽動作
? ? ? ? solidDom.style.transition = "0s all";
? ? ? ? solidDom.style.left = this.moveX + "px";
? ? ? ? // 很關(guān)鍵的地方 e.preventDefault()這個方法會關(guān)閉與當(dāng)前事件關(guān)聯(lián)的其他動作 只執(zhí)行此事件
? ? ? ? e.preventDefault();
? ? ? }),
? ? ? ? // 鼠標(biāo)抬起
? ? ? ? (document.onmouseup = () => {
? ? ? ? ? // 如果鼠標(biāo)抬起后拖拽距離沒到可移動距離最大值將返回起點(diǎn)0
? ? ? ? ? if (this.moveX !== MaxW) {
? ? ? ? ? ? solidDom.style.transition = ".5s linear";
? ? ? ? ? ? solidDom.style.left = 0;
? ? ? ? ? } else {
? ? ? ? ? ? // 如果成功設(shè)置判斷條件
? ? ? ? ? ? this.validation = true;
? ? ? ? ? }
? ? ? ? ? // 動作完成后將事件清空
? ? ? ? ? document.onmousemove = null;
? ? ? ? ? document.onmouseup = null;
? ? ? ? });
? ? }

export default {
? name: "twologin",
? data() {
? ? return {
? ? ? loginBoxShow: true,
? ? ? isActive: 0,
? ? ? userName: "",
? ? ? psd: "",
? ? ? input1: "",
? ? ? input2: "",
? ? ? select: "",
? ? ? validation: false,
? ? ? textStart: "向右拖動滑塊",
? ? ? textEnd: "驗(yàn)證成功",
? ? ? moveX: 0
? ? };
? },

最后寫一點(diǎn)今天學(xué)到的知識點(diǎn)