vue中多个input绑定enter按键事件
默认再每个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按键事件的更多相关文章
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- Vue循环中多个input绑定指定v-model
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种,一种是v-for中循环生成 ...
- Vue中自动获取input焦点
<input v-focus type="text" name="search" ref="input" autofocus v-mo ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- Vue中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- vue中html模板使用绑定的全局函数
我们知道在script中使用vue绑定的全局函数时, 我们需要用这种方式使用: this.Util.Fun(e) 那在模板中, 比如v-if中想使用Fun函数怎么办呢?你应该这样做 <i v-i ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- vue中时间控件绑定多个输入框
首先去下载laydate时间控件,引入到相应的模板中 <input type="text" val-required="" value="&qu ...
随机推荐
- 蓝桥杯模拟赛-引爆炸弹-DFS+并查集
今天整理电脑,翻出来了很久以前大佬给的题,贴一下. 引爆炸弹 1000ms 在一个 n×m的方格地图上,某些方格上放置着炸弹.手动引爆一个炸弹以后,炸弹会把炸弹所在的行和列上的所有炸弹引爆,被引爆的炸 ...
- Codeforces Round #328 (Div. 2)_A. PawnChess
A. PawnChess time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- JAVA获取客户端IP地址和MAC地址
1.获取客户端IP地址 public String getIp(HttpServletRequest request) throws Exception { String ip = request.g ...
- RAID 详解
一.什么是RAID 磁盘阵列全名是『Redundant Arrays of Inexpensive Disks, RAID 』,英翻中的意思是:容错式廉价磁盘阵列. RAID 可以透过一个技术(软件或 ...
- 文件末尾判断feof
feof 作用:如果文件结束,则返回非0值,否则返回0 但要注意的是feof要读取到文件结束标志EOF后,才能判断文件是否结束. 所以使用while(!feof(pFile))会出现最后fread会返 ...
- HDU 1874 畅通工程续(模板题——Floyd算法)
题目: 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让行人很困扰 ...
- error: Failed dependencies:解决
error: Failed dependencies:解决 使用rpma安装安装包时,会出现 error: Failed dependencies: 意思是 失败的依赖 解决方法: 在安装包后面加两个 ...
- 国寿e店/人寿云参会云助理,不去公司就能刷脸考勤打卡?
自从2017年3月平安保险公司实行E行销打卡考勤以来,保险增员迅猛增加,保险业绩也随之水涨船高.年底开始中国人寿保险也陆续开始实行app考勤,有些需要连接公司指定WiFi,或在指定地点方可打卡考勤.不 ...
- 如何控制input框!
ENTER键可以让光标移到下一个输入框 只能是中文 屏蔽输入法 只能输入英文和数字 只能是数字 只能显示,不能修改 只能输数字,判断按键的值 function onlyNum() { ...
- Hadoop问题:启动hadoop 2.6遇到的datanode启动不了
问题描述:第一次启动输入jps都有,第二次没有datanode 日志如下: 查看日志如下: -- ::, INFO org.mortbay.log: Started HttpServer2$Selec ...