vue怎么不通过dom操作获取dom节点
今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下:
template:`<div class="searchBar-div">
<input v-model="keyWord"
@keyup.enter='startSearch()'
class="searchBar-input"
type="search"
placeholder="搜索"
/>
<div class="searchBar-mask"
></div>
</div>`,
但是问题出现了,在手机端测试的时候发现,点击遮罩或者点击手机软键盘上的确定都无法使搜索框失焦,遮罩和软键盘都无法消失,只有点击软键盘上的完成或者“▽”符号(打不出那个符号,大家懂就好/捂脸),遮罩和软键盘才能消失。
那么如何使搜索框失焦呢?
当然,如果去操作dom,给遮罩层“searchBar-mask”绑定click事件,点击它的时候,再通过dom操作,使input失焦就解决问题了。
但是,整个项目没有用到jq,也没有用到dom操作,也不想因为这么一个小问题引进jq或者dom操作,只好另辟蹊径。
查资料啊文档啊,最后发现了ref属性还有vue的$emit,ref属性可以使代码可以获取到当前的dom节点,$emit可以是一个发射器,可以向自定义的事件发射信息,就有了一个思路,点击遮罩的时候,向一个自定义的事件发射信息,在搜索框监听这个自定义事件,收到信息后用ref属性获取当前的dom节点,使其失焦,完成!
最后的代码:
var searchBarComponent = {
template:`<div class="searchBar-div">
<input v-model="keyWord"
@keyup.enter='startSearch()'
v-on:search-blur="this.$refs.input.blur();"
class="searchBar-input"
type="search"
placeholder="搜索"
ref="input"
/>
<div class="searchBar-mask"
@click="searchBlur"
></div>
</div>`,
data:function(){
return{
keyWord:'',
}
},
methods: {
startSearch: function startSearch() {
this.$refs.input.blur();
console.log('Do Check'+this.keyWord);
this.$emit('searcher-key-word',this.keyWord);
},
searchBlur:function(){
this.$emit('search-blur');
}
}
}
template:`<div class="searchBar-div"> <input v-model="keyWord" @keyup.enter='startSearch()' v-on:search-blur="this.$refs.input.blur();" class="searchBar-input" type="search" placeholder="搜索" ref="input" /> <div class="searchBar-mask" @click="searchBlur" ></div> </div>`,
vue怎么不通过dom操作获取dom节点的更多相关文章
- javascript的DOM操作获取元素
一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> ...
- dom操作------获取元素的若干方法
// 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...
- jQuery-1.9.1源码分析系列(十一) DOM操作续——克隆节点
什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位 ...
- 【学亮IT手记】jQuery DOM操作-获取内容和属性
jQuery拥有可操作HTML元素和属性的强大方法. 其中非常重要的部分就是操作DOM的能力. DOM--文档对象模型. <!DOCTYPE html> <html> < ...
- js dom操作获取节点的一些方法
在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...
- dom操作------获取长/宽/距离等值的若干方法
1.offsetLeft:获取元素边框以外至文档顶的距离:若其祖先元素有定位属性position则返回值为元素到该定位元素的距离,不包括祖先元素的三宽(padding,border,margin),且 ...
- JavaScript的DOM操作获取元素的大小
通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...
- JavaScript的DOM操作获取元素实际大小
clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...
- JavaScript的DOM操作获取元素周边大小
一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <scri ...
随机推荐
- 十:audio 音频
属性名 类型 默认值 说明 id String video 组件的唯一标识符 src String 要播放音频的资源地址 loop Boolean false 是否循环播放 controls ...
- 简单封装axios api
可以在代码逻辑中写axios请求,处理请求结果,但是随着项目越来越大,代码会很繁琐,不容易维护,所以,可以把一些在所有请求中都要处理的逻辑抽取出来,封装成api方法.比如每次请求中都要判断是否有权限, ...
- [javaSE] IO流(管道流)
之前我们使用io流,都是需要一个中间数组,管道流可以直接输入流对接输出流,一般和多线程配合使用,当读取流中没数据时会阻塞当前的线程,对其他线程没有影响 定义一个类Read实现Runable接口,实现r ...
- JS 监听键盘按键
1. 实现Ctrl+ Enter 组合键触发事件 document.onkeydown=function(event){ var keyNum = window.event ? event.keyCo ...
- 撩课-Web大前端每天5道面试题-Day5
1.写一个深度克隆方法(es5)? /** * 深拷贝 * @param {object}fromObj 拷贝的对象 * @param {object}toObj 目标对象 */ function d ...
- Spring Boot 打包jar部署服务器
部署方式:打包成jar部署 部署方式有两种,一种是传统的war包,另一种是打包成jar,推荐第二种方式部署 部署准备 1. jar包内置tomcat,无需服务器安装tomcat环境 2.需要JDK,且 ...
- JS中数组和对象的区别
- 零基础学python习题 - 进入python的世界
1. python拥有以下特性:面向对象的特性.动态性.内置的数据结构.简单性.健壮性.跨平台性.可扩展性.强类型语言.应用广泛 2. python 需要 编译 3. 以下不属于python内置数据 ...
- WC2017 游记
你若安好,便是晴天. 其实本来是有一个写的比较详细的游记的……然而后来给断了,懒得补上了,简单一点好了. Day 0 早早爬起来去赶高铁…… 路上没太多可以写的……坐高铁的时候想起来了一些不开心的事情 ...
- JavaScript-原型&原型链&原型继承&组合函数
小小的芝麻之旅: 今天学习了js的原型,要说原型,我们先简单说一下函数创建过程. 原型 每个函数在创建的时候js都自动添加了prototype属性,这就是函数的原型,原型就是函数的一个属性,类似一个指 ...