Vue開發(fā)實現(xiàn)滑動驗證組件

更新時間：2023年07月02日 11:35:00 作者：糖墨夕

這篇文章主要為大家詳細(xì)介紹了如何利用Vue開發(fā)實現(xiàn)簡單的滑動驗證組件，并且適配移動和PC，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下

簡述

在開始開發(fā)工作之前，我們有必要先了解一下相關(guān)Javascript函數(shù)，方便我們后續(xù)的開發(fā)工作

在PC端

我們經(jīng)常使用鼠標(biāo)相關(guān)的事件來進(jìn)行交互。下面是一些常見的鼠標(biāo)事件：

click：當(dāng)用戶點擊鼠標(biāo)左鍵時觸發(fā)。
dblclick：當(dāng)用戶雙擊鼠標(biāo)左鍵時觸發(fā)。
mousedown：當(dāng)用戶按下鼠標(biāo)按鈕時觸發(fā)。
mouseup：當(dāng)用戶釋放鼠標(biāo)按鈕時觸發(fā)。
mousemove：當(dāng)用戶移動鼠標(biāo)時觸發(fā)。
mouseover：當(dāng)用戶將鼠標(biāo)移動到元素上方時觸發(fā)。
mouseout：當(dāng)用戶將鼠標(biāo)移出元素時觸發(fā)。

這些事件可以通過JavaScript來進(jìn)行處理。我們可以使用事件監(jiān)聽器將特定的事件與特定的元素關(guān)聯(lián)起來，從而在事件觸發(fā)時執(zhí)行相應(yīng)的操作。

此外，在一些庫和框架中，可能還會有更多的鼠標(biāo)相關(guān)事件和功能可供使用。例如，一些圖形庫可能提供鼠標(biāo)繪圖功能，而一些游戲引擎可能提供鼠標(biāo)控制功能，當(dāng)然這些不是我寫這篇文章所要說的，就簡單的從鼠標(biāo)滑動驗證開始，凡事必先利其器，方能有效地使用鼠標(biāo)事件來進(jìn)行交互。

但是有時候，我們有些用戶會通過移動端（如手機(jī)、ipad等）用手觸控的方式去訪問PC網(wǎng)站的時候，鼠標(biāo)事件就不起作用。所以要考慮到一些兼容的情況，那么就有了下面關(guān)于移動端的內(nèi)容

在移動端

如觸摸(touch)、滑動(swipe)、捏合(pinch) 等，是用來與移動設(shè)備進(jìn)行互動的重要手段而我主要總結(jié)下觸摸相關(guān)，并且待會用于開發(fā)滑動驗證組件的方法，如下：

常見的觸摸相關(guān)事件包括以下幾種：

touchstart：當(dāng)手指觸摸屏幕時觸發(fā)，即手指接觸到觸摸表面。
touchmove：當(dāng)手指在屏幕上移動時觸發(fā)，即手指在觸摸表面上滑動。
touchend：當(dāng)手指從屏幕上離開時觸發(fā)，即手指離開觸摸表面。
touchcancel：在手指移動過程中，如果有其他事件（如電話呼入）發(fā)生，會觸發(fā)該事件，取消當(dāng)前觸摸過程。
touchenter：當(dāng)手指觸摸到某個元素時觸發(fā)，即手指進(jìn)入元素所在區(qū)域。
touchleave：當(dāng)手指從某個元素上離開時觸發(fā)，即手指離開元素所在區(qū)域。

通過監(jiān)聽這些觸摸事件，我們可以實現(xiàn)不同的交互效果和功能，比如通過滑動事件來實現(xiàn)輪播圖、通過長按事件來實現(xiàn)彈出菜單，當(dāng)然也可以來實現(xiàn)驗證組件。同時，還可以通過事件對象獲取觸摸點的坐標(biāo)信息，從而精確地處理觸摸操作。好了，廢話不多說，我們開始著眼于開發(fā)工作

滑動驗證組件

先上成型的滑動組件效果圖

第一張命名為：png1

第二張命名為：png2

JYM看了這兩張圖后，可能覺得少了那么一些花里胡哨，看起來好像也蠻簡單的。但是嘛，涉及到的知識點也不少。我們先來梳理一下開發(fā)思路：

思路梳理

定義組件結(jié)構(gòu)：確定滑動驗證組件的整體結(jié)構(gòu)，可以使用HTML和CSS來布局和樣式化組件。一般包括一個容器用于顯示滑塊和背景，一個滑塊用于拖動，以及一個按鈕用于觸發(fā)驗證。
實現(xiàn)滑塊拖動功能：通過監(jiān)聽觸摸事件或鼠標(biāo)事件，實現(xiàn)滑塊的拖動功能?？梢允褂肑avaScript來獲取觸摸或鼠標(biāo)事件的坐標(biāo)信息，并根據(jù)拖動距離來改變滑塊的位置。
添加驗證邏輯：當(dāng)滑塊被拖動到預(yù)定位置時，需要觸發(fā)驗證邏輯。可以定義一個閾值，當(dāng)滑塊的位置超過閾值時，認(rèn)為驗證成功?？梢允褂肑avaScript來判斷滑塊位置是否超過閾值，并觸發(fā)驗證結(jié)果。
添加反饋效果：根據(jù)驗證結(jié)果，可以添加相應(yīng)的反饋效果，比如驗證成功時顯示成功提示，驗證失敗時顯示失敗提示?？梢允褂肅SS動畫或Class切換來實現(xiàn)反饋效果的顯示與隱藏。
提供可配置選項：為了滿足不同場景的需求，可以為組件提供一些可配置的選項，例如滑塊的占比、滑塊背景的顏色、驗證成功提示的內(nèi)容等。
添加事件回調(diào)：為了讓開發(fā)者能夠在驗證成功或失敗后執(zhí)行相應(yīng)的處理邏輯，可以為組件提供事件回調(diào)函數(shù)，例如驗證成功回調(diào)和驗證失敗回調(diào)。

代碼實現(xiàn)

第一步：定義組件結(jié)構(gòu)

<div class="drag">
    <div class="bg" />
    <div class="text" @selectstart="sotp">
            <img v-if="success" src="@/assets/icon/login_icon_successful.png" width="16px" />
            {{ tips }}
    </div>
    <div class="btn" />
</div>

并用CSS來布局和樣式化

const oDarg = getDom('.drag');
const oBg = getDom('.bg');
const oText = getDom('.text');
const oBtn = getDom('.btn');
oBtn.style.left = 0;
oBg.style.width = 0;
oBg.style.transition = 'width 1s ease';
oBtn.style.transition = 'left 1s ease';
tips.value = '滑動驗證';
success.value = false;
oText.style.color = '#666666';
oText.style.background = '#E5E5E5';

第二步：實現(xiàn)滑塊拖動功能

通過監(jiān)聽觸摸事件或鼠標(biāo)事件，實現(xiàn)滑塊的拖動功能，如下：

// PC端事件
// 鼠標(biāo)按下事件
oBtn.onmousedown = function (eve) {
    console.log('叮咚');
    // const phone = _this.form.getFieldValue('phone')
    // const password = _this.form.getFieldValue('password')
    // if (!phone || !password) {
    //   _this.$message.info(_this.$t('msg.telPsw'))
    //   return false
    // }
    // this.isMouseUp = false
    oText.style.background = 'none';
    oBg.style.transition = '';
    oBtn.style.transition = '';
    const e = eve || window.event;
    const downX = e.clientX;
    // eslint-disable-next-line no-unused-vars
    let successPan = false; // 判斷驗證是否成功
    const distance = oDarg.offsetWidth - oBtn.offsetWidth; // 驗證成功的距離
    // 鼠標(biāo)移動
    document.onmousemove = function (eve) {
            console.log('onmousemove');
            const e = eve || window.event;
            const moveX = e.clientX;
            let offsetX = moveX - downX;
            if (offsetX > distance) {
                    offsetX = distance;
            } else if (offsetX < 0) {
                    offsetX = 0;
            }
            oBtn.style.left = `${offsetX}px`;
            oBg.style.width = `${offsetX}px`;
            if (offsetX === distance) {
                    // 判斷驗證通過
                    // _this.tips = _this.$t('login.verificationRes')
                    tips.value = '驗證成功';
                    success.value = true;
                    // oBtn.innerHTML = '&radic;'
                    oText.style.color = '#FFF';
                    oBtn.style.color = '#4CAF50';
                    successPan = true; // 驗證通過時的條件
                    siliding.value = successPan;
                    console.log(siliding, 'this.siliding');
                    document.onmousemove = null; // 驗證通過后 鼠標(biāo)按下事件和鼠標(biāo)移動都沒用了 因此需要清除
                    oBtn.onmousedown = null;
            }
    };
    // 鼠標(biāo)抬起事件
    document.onmouseup = function () {
        if (!successPan) {
                oBtn.style.left = 0;
                oBg.style.width = 0;
                oBg.style.transition = 'width 1s ease';
                oBtn.style.transition = 'left 1s ease';
        }
        document.onmousemove = null;
        oBtn.onmouseup = null;
    };
};

其中，onmousemove和onmouseup這兩個方法，已經(jīng)在簡述中，提過了它的觸發(fā)條件，當(dāng)然也得考慮到移動端訪問的情況，

// 移動端事件
oBtn.ontouchstart = function (eve) {
    console.log('ontouchstart');
    // const phone = _this.form.getFieldValue('phone')
    // const password = _this.form.getFieldValue('password')
    // if (!phone || !password) {
    //   _this.$message.info(_this.$t('msg.telPsw'))
    //   return false
    // }
    this.isMouseUp = false;
    oText.style.background = 'none';
    oBg.style.transition = '';
    oBtn.style.transition = '';
    let e = eve || window.event;
    // 移動端特殊處理
    e = 'ontouchstart' in document ? e.touches[0] : e;
    const downX = e.clientX;
    // eslint-disable-next-line no-unused-vars
    let successPan = false; // 判斷驗證是否成功
    const distance = oDarg.offsetWidth - oBtn.offsetWidth; // 驗證成功的距離
    // 鼠標(biāo)移動
    // document => oBtn
    oBtn.ontouchmove = function (eve) {
        console.log('ontouchmove');
        console.log(eve);
        let e = eve || window.event;
        // 移動端特殊處理
        e = 'ontouchstart' in document ? e.touches[0] : e;
        console.log(e.clientX);
        const moveX = e.clientX;
        let offsetX = moveX - downX;
        if (offsetX > distance) {
                offsetX = distance;
        } else if (offsetX < 0) {
                offsetX = 0;
        }
        oBtn.style.left = `${offsetX}px`;
        oBg.style.width = `${offsetX}px`;
    if (offsetX === distance) {
            // 判斷驗證通過
            // _this.tips = _this.$t('login.verificationRes')
            // _this.success = true
            tips.value = '驗證成功';
            success.value = true;
            // oBtn.innerHTML = '&radic;'
            oText.style.color = '#FFF';
            oBtn.style.color = '#4CAF50';
            successPan = true; // 驗證通過時的條件
            siliding.value = successPan;
            console.log(siliding.value, 'this.siliding');
            // document => oBtn
            oBtn.ontouchmove = null; // 驗證通過后 鼠標(biāo)按下事件和鼠標(biāo)移動都沒用了 因此需要清除
            oBtn.ontouchstart = null;
    }
};

依此類推，在這里就不過的闡述

第三步：添加驗證邏輯

當(dāng)滑塊被拖動到預(yù)定位置時，需要觸發(fā)驗證邏輯，并設(shè)定一個成功的閾值

const distance = oDarg.offsetWidth - oBtn.offsetWidth; // 驗證成功的距離

我這里設(shè)置的閾值是，軌道總長度 - 按鈕總長度。

當(dāng)用戶滑動按鈕到達(dá)distance范圍時，只要是小于或等于，都算滑動驗證成功，并自動完成剩余的滑動軌跡