vue如何用input 实现一个仿百度搜索输入框的组件

子组件：
变量：
placeholder 搜索的默认提示
searchButtonText 搜索button内部文字
searchValue input输入框中的搜索内容
couldEmpty 搜索内容为空是否可以
方法：
handleSearch 进行搜索
debounceInput 根据输入的内容会提示用户可能的搜索内容
clear 用户清空搜索内容
changeTab 用户选中提示的搜索内容触发搜索

<template>
  <div class="search_wrap" :style="searchWrapStyle">
    <!-- 搜索栏 -->
    <header class="searchBox">
      <input
        type="text"
        class="input"
        :placeholder="placeholder"
        v-model="searchValue"
        @input="debounceInput()()"
        @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">
        <li
          class="tabitem"
          v-for="(item, index) in tabList"
          :key="index"
          @click="changeTab(index, item.value)"
        >
          <span>{
   {
    item.name }}</span>
          <!-- <span :class="{ active: tabChosen == index }">{
   {
    item.name }}</span> -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
   
  name: 'HelloWorld',
  components: {
   },
  props: {
   
    // 是否允许输入空值。默认不能。
    couldEmpty: {
   
      type: Boolean,
      default: false
    },
    searchWrapStyle: {
   
      type: Object,
      default (