网上找的回车录入焦点前往一下控件的方式普遍比较复杂,自己不想用。学习了一个下午后似乎搞定。先帖一段代码,以后有时间解释,也请大家指教。利用下面的代码注册自己的v-enterToNext指令,并在el-form中指定使用,内部的4个控件不需要设置任何东西就能在输入回车时跳到下一控件

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-dilalog,只需在el-form中指定v-enterToNext,后面的【=”true"】其实可能省略

vue在element-ui的对话框的编辑控件回车时让焦点跳到下一控件的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  3. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  4. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  5. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  6. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  7. 第五十三篇:Vue安装Element ui

    好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...

  8. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  9. Vue.js + Element.ui 从搭建环境到打包部署

    一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...

随机推荐

  1. sqlserver 书查询 之二

    WITH treeAS(SELECT ParentId, Organization_ID,1 AS x2level,Organization_Name,CAST(Organization_Name A ...

  2. (5)修改Linux的基本配置

    **IP地址配置,最简单的方法:在命令行运行setup,按照提示修改即可. 1.修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=serv ...

  3. jquery.cookie用法及其注意点

    jquery.cookie是一个轻量级的cookie插件,由于已被封装好,可拿来即用. 基本的创建.读取.删除见另一篇文章 浅谈localStorage.sessionStorage 与cookie  ...

  4. python——元组和字典类型简明理解

    元组类型: 元祖创建: 不需要括号可以但是一个元素就当成了字符串类型了 >>> tup1="a"; >>> type(tup1) <cla ...

  5. php获取微信的openid

    https://www.cnblogs.com/wxfallstar/p/6826886.html https://www.cnblogs.com/liangxiblog/p/5909432.html

  6. java.util.Stack类中的peek()方法

    java.util.stack类中常用的几个方法:isEmpty(),add(),remove(),contains()等各种方法都不难,但需要注意的是peek()这个方法. peek()查看栈顶的对 ...

  7. 一个ipv4到ipv6的移植问题

    之前在使用ipv4的时候,有一个模块是使用raw socket来发包,它使用的一个option是:IP_HDRINCL. 如果设置了IP_HDRINCL选项,则raw会绕过source validat ...

  8. html转换pdf

    项目需求:移动端APP项目需要在手机上签订合同,将html转换成pdf格式的文件 解决方案:是用插件wkhtmltopdf; 记录用法:1.网址https://wkhtmltopdf.org/ 下载压 ...

  9. 原子性: Interlocked 类

    public class CounterNoLock:CountBase { private int _count; public int Count { get { return _count; } ...

  10. Android Studio修改项目中整体包名

    莫名的需求,要把之前的apk分成三个不同的apk,还要在应用市场能够上线,麻麻滴这样一听那还不要各个apk包的包名不同以及apk签名文件也不同嘛(签名文件一般也用不同,为防止上线冲突嘛).所以就亲自尝 ...