用過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為空時執行相應的方法。

完畢！ 敬禮！