时间:2021-05-26
在网页的表单中,经常需要用程序来控制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的元素,代码如下:
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 指令方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
auto-vue-fileautocreate.vuefilebyshellcommand通过终端自动创建vue文件前言:1:我们在写xxx.vue页面文件的时
vue-autoui是一款基于vue和element扩展的一个自动化UI控件,它主要提供两个控件封装分别是auto-form和auto-grid;通过这两个控件
下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示:实例方法//自定义指令Vue.directive('drag',function(){varoDi
1.Vue指令 Vue提供自定义实现指令的功能,和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.
插件的分类添加全局的方法或者属性比如:vue-element添加全局的资源比如:指令v-bind通过mixin方法添加的一些混合添加Vue实例方法Vue.pro