封装一个基础的vue搜索框组件

搜索框组件代码：

<!-- 基础搜索组件。 -->
<template>
  <div class="search_wrap" :style="searchWrapStyle">
    <!-- 搜索栏 -->
    <header class="searchBox">
      <input
        type="text"
        class="input"
        :placeholder="placeholder"
        v-model="searchValue"
        @keyup.enter="handleSearch"
      />
      <div class="close" @click="clear">x</div>
      <button class="btn-search" @click="handleSearch">{{searchButtonText}}</button>
    </header>
    <!-- tab栏 -->
    <div class="navtab" v-if="tabList.length > 0">
      <ul class="navwrap">
        <span
          class="tabitem"
          v-for="(item, index) in tabList"
          :key="index"
          @click="changeTab(index, item.value)"
        >
          <span :class="{ active: tabChosen == index }">{{ item.name }}</span>
        </span>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    // 是否允许输入空值。默认不能。
    couldEmpty: {
      type: Boolean,
      default: false
    },
    searchWrapStyle: {
      type: Object,
      default () {
        return {
          backgroundColor: '#fff'
        }
      }
    },
    searchButtonText: {
      type: String,
      default: '搜索'
    },
    placeholder: {
      type: String,
      default: '请输入关键字'
    },
    // tab栏的数据
    tabList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      searchValue: ''
    }
  },
  // 方法集合
  methods: {
    clear () {
      this.searchValue = ''
    },
    // 搜索
    handleSearch () {
      console.log('handleSearch')
      if (this.searchValue == '' && !this.couldEmpty) {
        this.$toast({
          message: '请输入关键词！',
          position: 'middle'
        })
        return
      }
      this.loadList()
    },
    changeTab (index, value) {
      this.tabChosen = index
      this.loadList()
    },
    loadList () {
      this.$emit('handSearch', this.searchValue)
    }
  }
}
</script>
<style rel='stylesheet/less' lang='less' scoped>
//@import url(); 引入公共css类
.search_wrap {
  .searchBox {
    position: relative;
    width: 100%;
    height: 1.25rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* 输入框 */
    .input {
      margin-left: 0.3rem;
      background: #f8f8f8;
      border: 1px solid #dcdcdc;
      border-radius: 30px;
      border-radius: 30px;
      display: block;
      flex: 1;
      height: 0.65rem;
      border-radius: 0.3rem;
      overflow: hidden;
      padding: 0 0.5rem;
      font-size: 0.26rem;
    }
    .close {
      width: 0.33rem;
      height: 0.33rem;
      line-height: 0.33rem;
      text-align: center;
      background-color: #c8c8c8;
      border-radius: 50%;
      transform: translateX(-0.65rem);
      color: #fff;
    }

    /* 搜索按钮 */
    .btn-search {
      display: block;
      width: 1.14rem;
      height: 100%;
      font-size: 0.32rem;
      color: #414141;
    }
  }
  .navtab {
    width: 100%;
    height: 0.7rem;
    background: #fff;
    // display: flex;
    .navwrap {
      font-size: 0.26rem;
      width: 100%;
      color: #c2c2c2;
      white-space: nowrap;
      overflow-x: auto;
      // display: flex;
      // justify-content: space-around;

      span.tabitem {
        // width: 25%;
        //
        margin-left: 0.6rem;
        font-size: 0.26rem;
        height: 0.7rem;
        line-height: 0.7rem;
        display: inline-block;
        text-align: center;
        span {
          display: inline-block;
          height: 100%;
        }
        span.active {
          box-sizing: border-box;
          border-bottom: 0.04rem solid @theme;
          color: @theme;
        }
      }
      span.tabitem:nth-last-of-type(1) {
        margin-right: 0rem;
      }
      li:nth-of-type(5) {
        margin-right: 0rem;
      }
    }
  }
}
</style>

使用时的代码(已省略部分无关代码)：

<!-- 终端号码搜索 -->
<template>
  <container class="query">
    <common-header slot="header" title="终端型号" />
    <base-search
      searchButtonText="查询"
      placeholder="请输入终端型号"
      slot="header"
      :could-empty="true"
      @handSearch="getSearchTerminalList"
    ></base-search>
    <div class="content">
      <div class="lsit_wrap">
        <div
          class="item_wrap"
          @click="handSearch(item)"
          v-for="(item, i) of searchTerminalList"
          :key="item.prizeCode"
        >
          <div class="index">{{i + 1}}</div>
          <div class="text">{{item.name}}</div>
        </div>
      </div>
    </div>
  </container>
</template>

<script>
import BaseSearch from '@/components/base/BaseSearch'
import { mapGetters } from 'vuex'

export default {
  name: '',
  components: { BaseSearch },
  data () {
    return {
      searchKey: '',
      originTerminalNumberData: [],
      businessCodeTerminalList: [],
      searchTerminalList: []
    }
  },
  computed: {
  },
  watch: {},
  // 方法集合
  methods: {
    ...
    // 通过businessCode,筛选前面数据字典获取的终端号码集合。
    getSearchTerminalList (searchValue) {
      console.log('开始搜索')
      this.searchTerminalList = this.businessCodeTerminalList.filter(item =>
        item.name.includes(searchValue)
      )
    }
  },
}
</script>