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


Posted in Javascript onAugust 25, 2018

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

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

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
服务器安全设置的几个注册表设置
Jul 28 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
详解微信小程序网络请求接口封装实例
May 02 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 #Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 #Javascript
对vue 键盘回车事件的实例讲解
Aug 25 #Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 #Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 #Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 #Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 #Javascript
You might like
新浪新闻小偷
2006/10/09 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
Node.js简单入门前传
2017/08/21 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python中编写ORM框架的入门指引
2015/04/29 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
经典c++面试题四
2015/05/14 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
规范化管理年活动总结
2014/08/29 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技