vue怎么不通过dom操作获取dom节点

Posted 2020-10-04

今天写一个公众号的项目，写了一个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>`,