国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue-auto-focus: 控制自動聚焦行為的 vue 指令

Aldous / 1854人閱讀

摘要：在網(wǎng)頁的表單中，經(jīng)常需要用程序來控制和的自動聚焦行為。為了應(yīng)付這種需求，就做了這個指令，地址，歡迎。

在網(wǎng)頁的表單中，經(jīng)常需要用程序來控制input和textarea的自動聚焦行為。例如我最近做的一個項目，有個裝箱出庫的流程，input框自動聚焦的流程如下：頁面進入時自動聚焦到訂單號輸入框->訂單號掃描完畢聚焦到商品條碼輸入框->掃描完一個商品條碼后依然停留在條碼輸入框->所有條碼掃描完畢聚焦到訂單號輸入框。為了應(yīng)付這種需求，就做了這個指令，github地址：vue-auto-focus，歡迎star。

example
行為控制

next 聚焦到下一個元素

prev 聚焦到上一個元素

first 聚焦到第一個元素

last 聚焦到最后一個元素

jump 聚焦到指定的元素

聚焦行為控制邏輯 
/**
 * 聚焦行為控制
 * next 聚焦到下一個元素
 * prev 聚焦到上一個元素
 * first 聚焦到第一個元素
 * last 聚焦到最后一個元素
 * jump 跳轉(zhuǎn)到指定的元素
 * @param el
 */
const focusCtrl = function (el) {
    const action = el.dataset.action
    const allFocusEls = getAllFocusEls(el)
    const focusLen = allFocusEls.length
    let current = getTargetIndex(el,allFocusEls)
    switch (action) {
        case "next":  // 如果action為next,則聚焦到下一個輸入框
            if (current >= focusLen - 1) {
                current = focusLen - 1
            } else {
                current++
            }
            autoFocus(allFocusEls[current])
            break
        case "prev":  // 如果action為prev,則聚焦到上一個輸入框
            if (current <= 0) {
                current = 0
            } else {
                current--
            }
            autoFocus(allFocusEls[current])
            break
        case "first": // 如果為first,則聚焦到第一個輸入框
            current = 0
            autoFocus(allFocusEls[current])
            break;
        case "last": // 如果為last,則聚焦到最后一個輸入框
            current = focusLen - 1
            autoFocus(allFocusEls[current])
            break
        case "jump": // 如果為jump,則獲取focusIndex,跳轉(zhuǎn)到對應(yīng)的輸入框
            if (current >= 0 && current < focusLen) {
                autoFocus(allFocusEls[current])
            }
            break
    }
}

必須在需要控制的元素上添加data-index屬性，需要在父元素上添加data-action屬性和data-current屬性，data-action為指令行為的類型（值為next,prev等），data-current為當(dāng)前聚焦元素的data-index值，getAllFocusEls方法其實就是獲取所有屬性為data-index的元素，代碼如下：

/**
 * 獲取需要聚焦的所有元素
 * @param el {Node} 指令掛載的元素
 * @returns {NodeList} 需要聚焦的元素列表
 */
const getAllFocusEls = function (el) {
    return el.querySelectorAll("[data-index]")
}

getTargetIndex方法用來獲取當(dāng)前聚焦元素的在集合中的索引值，代碼如下：

/**
 * 獲取當(dāng)前聚焦元素在集合中的位置
 * @param el
 * @param collection
 * @returns {number}
 */
const getTargetIndex = function(el,collection) {
    const target = document.querySelector(`[data-index="${el.dataset.current}"]`)
    return Array.from(collection).indexOf(target)
}
inserted

指令掛載時，自動聚焦到指定的元素

/**
 * 進入頁面時,根據(jù)設(shè)置的data-index索引值,聚焦到對應(yīng)的輸入框
 * @param el
 */
inserted: function (el) {
    const allFocusEls = getAllFocusEls(el)  // 獲取需要聚焦的input元素組
    let current = getTargetIndex(el,allFocusEls)
    if (!current || current < 0 || current >= allFocusEls.length) {  // 如果沒有設(shè)置data-current,或者current的數(shù)值范圍不符合要求,則默認(rèn)聚焦到第一個輸入框
        current = 0
    }
    const currentEl = allFocusEls[current]
    autoFocus(currentEl)
},
update

通過指令的value值控制指令的執(zhí)行，如果值有變動，則執(zhí)行指定的操作，聚焦到指定的元素

/**
 * 更新時,如果focusCtrl有變動,則根據(jù)actionType來判斷聚焦的行為,聚焦到對應(yīng)的元素
 * @param el
 * @param value
 * @param oldValue
 */
update: function (el,{value,oldValue}) {
    if (value !== oldValue) {
        focusCtrl(el)
    }
},

最后，所有文章都會同步發(fā)送到微信公眾號上，歡迎關(guān)注,歡迎提意見：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81228.html

相關(guān)文章

  • Vue基礎(chǔ)

    摘要：基礎(chǔ)安裝命令行工具提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。打開瀏覽器的控制臺，并修改。自定義指令聚焦元素當(dāng)頁面加載時，元素將獲得焦點注意在移動版上不工作?，F(xiàn)在讓我們完善這個指令注冊一個全局自定義指令當(dāng)綁定元素插入到中。 Vue基礎(chǔ) 安裝vue npm install vue 命令行工具(CLI) Vue.js 提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。該工具提供開...

    silencezwm 評論0 收藏0

  • Vue指令詳解

    摘要：添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。只當(dāng)點擊鼠標(biāo)右鍵時觸發(fā)只當(dāng)點擊鼠標(biāo)中鍵時觸發(fā)以模式添加偵聽器，減少額外的監(jiān)聽，提高性能表示永遠(yuǎn)不會調(diào)用。記住，指令函數(shù)能夠接受所有合法的表達(dá)式。 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 關(guān)于key 官方...

    itvincent 評論0 收藏0

  • Vue指令詳解

    摘要：添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。只當(dāng)點擊鼠標(biāo)右鍵時觸發(fā)只當(dāng)點擊鼠標(biāo)中鍵時觸發(fā)以模式添加偵聽器，減少額外的監(jiān)聽，提高性能表示永遠(yuǎn)不會調(diào)用。記住，指令函數(shù)能夠接受所有合法的表達(dá)式。 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 關(guān)于key 官方...

    malakashi 評論0 收藏0

  • Vue指令詳解

    摘要：添加事件偵聽器時使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。只當(dāng)點擊鼠標(biāo)右鍵時觸發(fā)只當(dāng)點擊鼠標(biāo)中鍵時觸發(fā)以模式添加偵聽器，減少額外的監(jiān)聽，提高性能表示永遠(yuǎn)不會調(diào)用。記住，指令函數(shù)能夠接受所有合法的表達(dá)式。 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 關(guān)于key 官方...

    Richard_Gao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<