vue中多个input绑定enter按键事件

时间:2022-09-24 19:31:11

默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件

let handleEnter = (obj, handle) => {
if(!obj){
return;
}
if (!obj.$options) {
return;
}
//因为使用的是iView的组件 所以判断绑定的是Input 和 handleEnter
//如果使用默认的input 则是判断 INPUT 和 keyup
if (obj.$options._componentTag == "Input") {
obj.handleEnter = handle;
return;
}
//如果使用默认的input 这里遍历的是obj.$el.children
if (obj.$children.length == 0) {
return;
}
obj.$children.map(item => {
handleEnter(item, handle);
}) }

  这里需要区分的是组件或者是input标签 因为我只使用了组件Input所以没有区分 如果使用的是input则是跟普通DOM一样遍历 后面不做赘述

  

vue中多个input绑定enter按键事件的更多相关文章

  1. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  2. Vue中如何监听组件的原生事件

    在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...

  3. Vue循环中多个input绑定指定v-model

    Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种,一种是v-for中循环生成 ...

  4. Vue中自动获取input焦点

    <input v-focus type="text" name="search" ref="input" autofocus v-mo ...

  5. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  6. vue中html模板使用绑定的全局函数

    我们知道在script中使用vue绑定的全局函数时, 我们需要用这种方式使用: this.Util.Fun(e) 那在模板中, 比如v-if中想使用Fun函数怎么办呢?你应该这样做 <i v-i ...

  7. 纯小白入手 vue3&period;0 CLI - 2&period;3 - 组件 home&period;vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  8. vue中时间控件绑定多个输入框

    首先去下载laydate时间控件,引入到相应的模板中 <input type="text" val-required="" value="&qu ...

  9. vue动态&lpar;type可变&rpar;input绑定

    遇到如下错误: v-model does not support dynamic input types 解决方法: vue 2.5.0以上,支持动态绑定 <input :type=" ...

随机推荐

  1. 如何在高并发分布式系统中生成全局唯一Id

    月整理出来,有兴趣的园友可以关注下我的博客. 分享原由,最近公司用到,并且在找最合适的方案,希望大家多参与讨论和提出新方案.我和我的小伙伴们也讨论了这个主题,我受益匪浅啊…… 博文示例: 1.     ...

  2. 记处理线上记录垃圾日志 The view &&num;39&semi;Error&&num;39&semi; or its master was not found

    最近监控线上日志,网站是ASP.NET MVC 开发的,发现不少错误日志都记录同样的内容: The view 'Error' or its master was not found or no vie ...

  3. replication&lowbar;slot and PostgreSQL Replication

    主库IP:192.168.230.128 备库IP:192.168.230.129 PostgreSQL版本: 主备机PostgreSQL源码包均位于/opt/soft_bak OS:CentOS5 ...

  4. MongoDB基本操作命令

    由于工作需要,笔者这两天使用了一下MongoDB.真的很不习惯!但是确实好用,命令比mysql和sqlserver简单很多.在这里整理一些MongoDB的基本操作命令分享出来. 客户端的安装就不说了, ...

  5. The code of method &lowbar;jspService&lpar;HttpServletRequest&comma; HttpServletResponse&rpar; is exceeding the 65535 bytes limit

    如果你是通过搜索来到本文的,相信你应该是遇到了如下的错误 The code of method _jspService(HttpServletRequest, HttpServletResponse) ...

  6. 多线程归并排序的实现 java

    多线程是非常适合归并排序的,因为归并排序是分治法,所以分割后可以独立运行,最后将结果归并起来就行了.如何写一个多线程程序呢?今天无聊,总结一下啊. 首先写个普通的归并排序,以后的多线程就调用这个排序. ...

  7. 大数据 --&gt&semi; 大数据关键技术

    大数据关键技术 大数据环境下数据来源非常丰富且数据类型多样,存储和分析挖掘的数据量庞大,对数据展现的要求较高,并且很看重数据处理的高效性和可用性. 传统数据处理方法的不足 传统的数据采集来源单一,且存 ...

  8. Java开发笔记(四十三)更好用的本地日期时间

    话说Java一连设计了两套时间工具,分别是日期类型Date,以及日历类型Calendar,按理说用在编码开发中绰绰有余了.然而随着Java的日益广泛使用,人们还是发现了它们的种种弊端.且不说先天不良的 ...

  9. JS中AOP的实现和运用

    在编写js的时候,我们有时会遇到针对某种场景做处理,比如在方法开始的时候校验参数,执行方法前检查权限,或是删除前给出确认提示等等.这些校验方法.权限检测.确认提示,规则可能都是相同的,在每个方法前去调 ...

  10. 转:ORACLE 中ROWNUM用法总结&excl;

    oracle 分页查询语句:select * from (select u.*,rownum r from (select * from userifno) u where rownum<大值) ...