【Mint-UI】search组件的使用及详解（内含取消事件的触发）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/NAMECZ/article/details/83991462

用过Mint-UI的同学都知道，Mint-UI的文档写的极简，刚接触的同学难免会因为文档不够详细而晕头转向无法下手（日常吐槽）

由于项目的需要，入坑了mint-ui的search组件，文档写的果然让人摸不到头脑。

下边直接看效果：

我们开发的是基于微信浏览器的移动端项目，该图是在微信开发者工具网页版上测试的

在ios 或者Android里的键盘上会出现搜索按钮，点击搜索按钮触发事件

取消事件文档上没有找到绑定有的事件，但是因为点击取消的时候，search搜索框里的值会被清空。

所以，在这里，我选择以监听searchValue的值是否为空来实现取消事件的触发

html代码如下：

<form action="" v-on:submit.prevent="">
  <mt-search
  v-model="searchValue"
  cancel-text="取消"
  placeholder="请输入收件人的姓名"
  @keyup.enter.native="search"
  class="font-size-8"
  style="width:100%;height:auto;"
  >
  </mt-search>
</form>

1、mint-ui的search组件中的input框type类型为“search”，但是依然需要包裹一层带有action的form表单，这是为了兼容ios；

2、使用form表单后，会出现一个弊端，就是提交后，页面会被刷新，这是我们不想要的，所以加上v-on:submit.prevent=""

      阻止表单的提交，因为vue自带有submit并且阻止刷新的事件，所以依旧会触发提交。

3、搜索事件：@keyup.enter.native="search"

4、在搜索事件里加入搜索后软键盘消失的事件：document.activeElement.blur();

js代码如下：（监听事件）

watch:{
    searchValue:function(newvs,oldvs){
	console.log("newvs",newvs);
        console.log("oldvs",oldvs);
	if(!newvs){
	  this.getList();
	}
    }
},

使用vue中的watch监听器，当点击取消的时候，searchValue为空，当监听到searchValue为空时执行相应的方法。

完毕！ 敬礼！