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 ...
随机推荐
- bzoj:1221;vijos 1552 软件开发
Description 某软件公司正在规划一项n天的软件开发计划,根据开发计划第i天需要ni个软件开发人员,为了提高软件开发人员的效率,公司给软件人员提供了很多的服务,其中一项服务就是要为每个开发人员 ...
- c++(八皇后)
八皇后是一道很具典型性的题目.它的基本要求是这样的:在一个8*8的矩阵上面放置8个物体,一个矩阵点只允许放置一个物体,任意两个点不能在一行上,也不能在一列上,不能在一条左斜线上,当然也不能在一条右斜线 ...
- MVC 统一异常处理
在出现异常时,我们不希望将错语的原因让客户看见,常常会做一个404错误页面,将所有发生的异常都跳至该页面,并把异常信息写在日志中.步骤如下: 1.让我们看看Global.asax页面Applicati ...
- for循环去重排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SSL证书绑定成功
LNMPA一键安装包:装好后, 静态文件用nginx服务器,php文件用Apache服务器, 默认Apache端口为88:nginx为80: SSL证书装之前80端口, 装好后用443端口:
- 提交到svn服务器时,一直缓冲不,
1,服务器端url问题,正常:https://192.168.1.102:8443/svn/dedegls/ 错误:https:// ...
- 虚拟主机导入MySQL出现Unknown character set: ‘utf8mb4’
http://www.lmlblog.com/14.html 前几天进行网站搬家,MySQL导入数据的时候,出现以下错误(没有定义的编码集utf8mb4): SQL 查询: ; MySQL 返回:文档 ...
- DEDECMS去掉自动生成首页或栏目后面带的index.html
Dede默认生成首页后,首页的链接后面会多出一个index.html.据官方说法这样有利于网站优化.但是这个index.html怎么看都不舒服,而且也不利于seo中主页url的统一.因为我的网站的ur ...
- CSS学习笔记day1
1.css的简介 css:层叠样式表 (层叠:一层一层的:样式表:很多的属性和属性值) 使页面显示效果更好 将页面内容和显示样式进行分离,提高了显示功能. 2.css和html的结合方式(4种) 在 ...
- Node之简单的前后端交互
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...