mt-search的使用及事件捕获(vue.js)

<template>


<div class="jmc-search">
<!-- 当点击确定按钮时，触发submit事件 -->
<div class="page-search" v-on:keyup.13="submit">
<mt-search autofocus v-model="value" :result="filterResult" @keyup.enter="testsearch()">
<!--<divclass="hotkey-wrapper" >
<p>热门搜索</p>
<ul class="hotkey-list">
<li class="speical">中国新歌声第二季</li>
<li>无条件 </li>
<li>双世宠妃 </li>
<li>从前慢 </li>
<li>王俊凯 </li>
<li>李宇春 </li>
</ul>
</div>-->
</mt-search>

<div class="hotkey-wrapper">
<p>热门搜索</p>
<ul class="hotkey-list">
<a class="speical">消毒液</a>
<a>大盘纸</a>
<a>玻璃刮</a>
<a>防滑地垫 </a>
<a>拖把</a>
<a>纸盒 </a>
<a>防滑地垫 </a>
<a>拖把</a>
</ul>
</div>

</div>


</div>


</template>


<script>
import Vue from 'vue';
import { Header } from 'mint-ui';
import { Search } from 'mint-ui';
import { Toast } from 'mint-ui';


Vue.component(Search.name, Search);
Vue.component(Header.name, Header);


export default {
name: 'page-search',
data() {
return {
value: '',
// 默认数据  
defaultResult: [
'Apple',
'Banana',
'Orange',
'Durian',
'Lemon',
'Peach',
'Cherry',
'Berry',
'Core',
'Fig',
'Haw',
'Melon',
'Plum',
'123',
'Peanut',
'Other'
]
}
},
created() {
//debug
//this.getSongs()
},
computed:{
//onchange
filterResult() {
return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value));
}
},
methods: {
//点击确定按钮时，弹出打印search的值
submit(){
Toast(this.value);
}
}


}
</script>


<style>
@import "../../assets/css/common.css";
.hotkey-wrapper {
padding: 15px;
}

.hotkey-wrapper p:first-child {
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 10px;
}

.hotkey-wrapper .hotkey-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.hotkey-wrapper .hotkey-list>a {
font-size: 14px;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
padding: 0 10px;
height: 30px;
line-height: 30px;
border-radius: 16px;
border: 1px solid #D7D7D7;
}

.hotkey-wrapper .hotkey-list>a.speical {
border-color: #24b6ff;
color: #24b6ff;
}
.mint-search{
height:auto;
}


</style>

最后

以上就是淡定芝麻为你收集整理的mt-search的使用及事件捕获(vue.js)的全部内容，希望文章能够帮你解决mt-search的使用及事件捕获(vue.js)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。