标签：公众 font 组件 logs code 它的 背景 思路 turn
今天写一个公众号的项目，写了一个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‘); } } }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>`,
标签：公众 font 组件 logs code 它的 背景 思路 turn
原文地址：http://www.cnblogs.com/polk-blogs/p/7427033.html
