在网页的表单中,经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框。为了应付这种需求,就做了这个指令,github地址:vue-auto-focus,欢迎star。
next 聚焦到下一个元素
prev 聚焦到上一个元素
first 聚焦到第一个元素
last 聚焦到最后一个元素
jump 聚焦到指定的元素
必须在需要控制的元素上添加data-index属性,需要在父元素上添加data-action属性和data-current属性,data-action为指令行为的类型(值为next,prev等),data-current为当前聚焦元素的data-index值,<code>getAllFocusEls</code>方法其实就是获取所有属性为data-index的元素,代码如下:
<code>getTargetIndex</code>方法用来获取当前聚焦元素的在集合中的索引值,代码如下:
指令挂载时,自动聚焦到指定的元素
通过指令的value值控制指令的执行,如果值有变动,则执行指定的操作,聚焦到指定的元素