<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: "",// 默認數(shù)據(jù)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>

效果圖

總結(jié)

以上是生活随笔為你收集整理的Mint-Ui的mt-search点击选中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。