Vue.js中实现通过一个dom的事件,使得另一dom也触发事件
2017-05-17 17:54
543 查看
Vue.js中实现通过一个dom的事件,使得另一dom也触发事件
最近做的项目中要求用户点击搜索按钮进入一个搜索界面,同时按下确认键也要进入搜索界面,这里我进入搜索界面时使用的是路由html代码如下
<input type="text" class="inputText" v-model="searchText" /> <router-link to="/search" class="search_icon" ><img src="../../../img/goods/search-icon.png"><router-link>
实现的界面是这样的
现在点击右边的搜索按钮已经可以进入路由,但是用户敲击键盘确认键还没有用。
我在图片中加上一个ref=”searchDom”,又在搜索框上加上一个键盘事件,完成的代码为
<input type="text" class="inputText" v-model="searchText" @keyup.enter="keyenter"/> <router-link to="/search" class="search_icon" ><img src="../../../img/goods/search-icon.png" ref="searchDom" alt="搜索"></router-link>
之后在methods中写下键盘按下的方法
keyenter() { this.$refs.searchDom.click(); }
这样就实现了操作dom联动事件。
相关文章推荐
- 纯js实现点击一个事件后,触发另外一个事件的方法
- 纯js实现点击一个事件后,触发另外一个事件的方法
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- Vue.js实战之通过监听滚动事件实现动态锚点
- 用Js Dom实现通过用户输入行数和列数,生成一个表格
- 用Js Dom实现通过用户输入行数和列数,生成一个表格
- js鼠标事件解析——如何用js实现一个拖动但是不触发其点击事件
- js实现默认或者触发一个事件选中元素内容的方法
- Vue通过操作Dom元素 实现 拖拽文件到网页进行文件上传【JS/JQ 原理也是一样的】
- 点击表格的单元格时实现变颜色,通过for循环为每个单元格添加一个onclick事件
- jQuery学习笔记(二)通过事件触发 实现对HTML和CSS的[得/增/删/改]
- 服务器按钮如何通过js验证再触发提交事件?
- 通过 UIKeyboardWillShowNotification 捕获软键盘事件 一个搜索效果的实现
- 当用js动态的改变一个输入框中的值后,并不能触发它的onchange事件
- 通过javascript实现点击一个按钮触发发音的动作
- 通过JS触发TextBox的ontextchanged事件,并获取TextBox所在GridView的那一行
- 利用js实现一个按钮可选择多个事件
- Android 一个按钮两次单击触发两个不同事件并实现两个View在同一界面切换
- 当一个表单中有多个按钮时,可以通过onclick()事件触发不同的action请求
- ajax+js+json+dom+php+mysql实现一个聊天室