网上找的回车去一下控件的方式普遍比较复杂,自己不想用。学习了一个下午后似乎搞定。先帖一段代码,以后有时间解释,也请大家指教
Vue.directive(‘enterToNext‘,{ inserted:function(el){ console.log("enterToNext...") //let frm = el.querySelector(‘.el-form‘); let inputs = el.querySelectorAll(‘input‘); console.log(inputs); //绑定回写事件 for( var i = 0 ;i < inputs.length ; i++ ){ inputs[i].setAttribute("keyFocusIndex",i); inputs[i].addEventListener(‘keyup‘, (ev) => { if (ev.keyCode === 13) { let targetTo = ev.srcElement.getAttribute(‘keyFocusTo‘); if(targetTo){ this.$refs[targetTo].$el.focus(); }else{ var attrIndex = ev.srcElement.getAttribute(‘keyFocusIndex‘); var ctlI = parseInt(attrIndex); if(ctlI<inputs.length-1) inputs[ctlI+1].focus(); } } }); } }, });
注册自己的v-enterToNext指令,并在el-form中指定使用,内部的4个控件就能在输入回车时跳到下一控件
vue在element-ui的对话框的编辑控件回车时让焦点下一控件
原文:https://www.cnblogs.com/kevin-Y/p/10351059.html