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

在网页的表单中，经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目，有个装箱出库的流程，input框自动聚焦的流程如下：页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框。

为了应付这种需求，就做了这个指令，github地址： ，欢迎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)
 }
},

以上这篇vue-auto-focus: 控制自动聚焦行为的 vue 指令方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。