Mint-Ui的mt-search点击选中

<template>
  <div class="page-search">
    <mt-search autofocus v-model="value" placeholder="搜索"> </mt-search>
    <mt-cell
      v-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>

效果图

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43248623/article/details/108992374
今日推荐