vue-auto-focus:控制自动聚焦行为的vue指令

待我称王封你为后i 2022-07-11 01:54 181阅读 0赞

在网页的表单中，经常需要用程序来控制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)
        }
    },

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

![bVCJ55_w_430_h_430][]

[vue-auto-focus]: https://github.com/yeyuqiudeng/vue-auto-focus
[bVCJ55_w_430_h_430]: /images/20220711/7f9ae48c7e1e4278a55e46b04e551c38.png