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

Aldous 发布于2019-08-20 13:45 / 1735人阅读

摘要：在网页的表单中，经常需要用程序来控制和的自动聚焦行为。为了应付这种需求，就做了这个指令，地址，欢迎。

在网页的表单中，经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目，有个装箱出库的流程，input框自动聚焦的流程如下：页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框。为了应付这种需求，就做了这个指令，github地址：vue-auto-focus，欢迎star。

example

行为控制

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)
    }
},

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

GPU服务器私有云自动聚焦部署阿里云服务器的控制台指令 java循环控制指令自动控制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81228.html

Vue基础

摘要：基础安装命令行工具提供一个官方命令行工具，可用于快速搭建大型单页应用。打开浏览器的控制台，并修改。自定义指令聚焦元素当页面加载时，元素将获得焦点注意在移动版上不工作。现在让我们完善这个指令注册一个全局自定义指令当绑定元素插入到中。 Vue基础安装vue npm install vue 命令行工具(CLI) Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开...

silencezwm 2019-08-21 17:35 评论0 收藏0
Vue指令详解

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

itvincent 2019-08-23 15:38 评论0 收藏0
Vue指令详解

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

malakashi 2019-08-30 15:56 评论0 收藏0
Vue指令详解

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

Richard_Gao 2019-08-02 14:25 评论0 收藏0