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

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

example

<template>
    <form v-auto-focus="focusCtrl" :data-current="currentIndex" :data-action="actionType">
        <input @focus="setFocusIndex(0)" type="text" data-index="0">
        <input @focus="setFocusIndex(1)" type="text" data-index="1">
        <textarea @focus="setFocusIndex(2)" name="" id="" cols="30" rows="10" data-index="2"></textarea>
        <input @focus="setFocusIndex(3)" type="text" data-index="3">
    </form>
</template>
<style scoped>
</style>
<script type="text/babel">
    export default {
        data() {
            return {
                focusCtrl: 0,  // 自動聚焦控制,變更時,執行自動聚焦指令
                currentIndex: 0, // 當前聚焦元素的索引
                actionType: 'next', // 自動聚焦的行爲類型
            }
        },
        methods: {
            /**
             * 控制自動聚焦指令執行
             * @param actionType {string} 自動聚焦類型 it can be 'next'/'prev'/'first'/'last'/'jump'
             * @param index {string} 當actionType爲'jump'時,須要傳入將要聚焦元素的索引
             **/
            setFocus(actionType,index) {
                if (actionType === 'jump') {
                    this.currentIndex = index
                }
                this.focusCtrl++
                this.actionType = actionType
            },
            /**
             * 元素聚焦時,獲取當前聚焦元素的索引
             * @param index {number} 當前聚焦的索引
             **/
            setFocusIndex(index) {
                this.currentIndex = index
            },
        }
    }
</script>複製代碼

行爲控制

• next 聚焦到下一個元素
• prev 聚焦到上一個元素
• first 聚焦到第一個元素
• last 聚焦到最後一個元素
• jump 聚焦到指定的元素

聚焦行爲控制邏輯

/** * 聚焦行爲控制 * next 聚焦到下一個元素 * prev 聚焦到上一個元素 * first 聚焦到第一個元素 * last 聚焦到最後一個元素 * jump 跳轉到指定的元素 * @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,跳轉到對應的輸入框
            if (current >= 0 && current < focusLen) {
                autoFocus(allFocusEls[current])
            }
            break
    }
}複製代碼

必須在須要控制的元素上添加data-index屬性，須要在父元素上添加data-action屬性和data-current屬性，data-action爲指令行爲的類型（值爲next,prev等），data-current爲當前聚焦元素的data-index值，getAllFocusEls方法其實就是獲取全部屬性爲data-index的元素，代碼以下：

/** * 獲取須要聚焦的全部元素 * @param el {Node} 指令掛載的元素 * @returns {NodeList} 須要聚焦的元素列表 */
const getAllFocusEls = function (el) {
    return el.querySelectorAll('[data-index]')
}複製代碼

getTargetIndex方法用來獲取當前聚焦元素的在集合中的索引值，代碼以下：

/** * 獲取當前聚焦元素在集合中的位置 * @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

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

/** * 進入頁面時,根據設置的data-index索引值,聚焦到對應的輸入框 * @param el */
inserted: function (el) {
    const allFocusEls = getAllFocusEls(el)  // 獲取須要聚焦的input元素組
    let current = getTargetIndex(el,allFocusEls)
    if (!current || current < 0 || current >= allFocusEls.length) {  // 若是沒有設置data-current,或者current的數值範圍不符合要求,則默認聚焦到第一個輸入框
        current = 0
    }
    const currentEl = allFocusEls[current]
    autoFocus(currentEl)
},複製代碼

update

經過指令的value值控制指令的執行，若是值有變更，則執行指定的操做，聚焦到指定的元素

/** * 更新時,若是focusCtrl有變更,則根據actionType來判斷聚焦的行爲,聚焦到對應的元素 * @param el * @param value * @param oldValue */
update: function (el,{value,oldValue}) {
    if (value !== oldValue) {
        focusCtrl(el)
    }
},複製代碼

最後，全部文章都會同步發送到微信公衆號上，歡迎關注,歡迎提意見：