用過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爲空時執行相應的方法。
完畢！ 敬禮！