<template><div class="page-search"><mt-search autofocus v-model="value" placeholder="搜索"> </mt-search><mt-cellv-for="item of filterResult":key="item":title="item"@click.native="select(item)"/></div>
</template><script>
export default {name: "page-search",data() {return {value: "",// 默认数据defaultResult: ["Apple","Banana","Orange","Durian","Lemon","Peach","Cherry","Berry","Core","Fig","Haw","Melon","Plum","Pear","Peanut","Other"]};},methods: {select(item) {console.log(item);console.log(this.$router);this.$router.go(-1);}},mounted() {this.$nextTick(() => {document.querySelector(".mint-search").style.height =document.querySelector(".mint-searchbar").offsetHeight + "px";});},computed: {filterResult() {return this.defaultResult.filter(value =>new RegExp(this.value, "i").test(value));}}
};
</script><style lang="scss">
input[type="search"] {color: #333;font-size: 16px;
}
input[type="search"]::-webkit-input-placeholder {color: #666;font-size: 16px;
}
input[type="search"]:-moz-placeholder {color: #666;font-size: 16px;
}
input[type="search"]::-moz-placeholder {color: #666;font-size: 16px;
}
input[type="search"]:-ms-input-placeholder {color: #666;font-size: 16px;
}
</style>
效果图