vue实现search组件

Vue 实现 Search 组件

基础搜索组件实现

创建基础的搜索输入框，包含输入事件和清除功能：

<template>
  <div class="search-container">
    <input
      v-model="searchQuery"
      @input="handleSearch"
      placeholder="Search..."
      class="search-input"
    />
    <button v-if="searchQuery" @click="clearSearch" class="clear-button">
      ×
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.searchQuery)
    },
    clearSearch() {
      this.searchQuery = ''
      this.$emit('search', '')
    }
  }
}
</script>

<style>
.search-container {
  position: relative;
  display: inline-block;
}
.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 200px;
}
.clear-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}
</style>

防抖优化

添加防抖功能避免频繁触发搜索：

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      debouncedSearch: null
    }
  },
  created() {
    this.debouncedSearch = debounce(this.emitSearch, 300)
  },
  methods: {
    handleSearch() {
      this.debouncedSearch()
    },
    emitSearch() {
      this.$emit('search', this.searchQuery)
    }
  }
}

异步搜索建议

实现带有搜索建议的组件：

<template>
  <div class="search-suggestions">
    <input
      v-model="searchQuery"
      @input="handleSearch"
      @focus="showSuggestions = true"
      @blur="hideSuggestions"
      placeholder="Search..."
    />
    <ul v-if="showSuggestions && suggestions.length">
      <li
        v-for="(item, index) in suggestions"
        :key="index"
        @mousedown="selectSuggestion(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: [],
      showSuggestions: false
    }
  },
  methods: {
    async handleSearch() {
      if (this.searchQuery.length > 2) {
        const response = await fetch(`/api/search?q=${this.searchQuery}`)
        this.suggestions = await response.json()
      } else {
        this.suggestions = []
      }
    },
    selectSuggestion(item) {
      this.searchQuery = item
      this.showSuggestions = false
      this.$emit('search', item)
    },
    hideSuggestions() {
      setTimeout(() => {
        this.showSuggestions = false
      }, 200)
    }
  }
}
</script>

高级搜索功能

实现多条件筛选搜索：

<template>
  <div class="advanced-search">
    <input
      v-model="searchParams.keyword"
      placeholder="Keyword"
      @input="search"
    />
    <select v-model="searchParams.category" @change="search">
      <option value="">All Categories</option>
      <option v-for="cat in categories" :value="cat.id" :key="cat.id">
        {{ cat.name }}
      </option>
    </select>
    <input
      type="date"
      v-model="searchParams.startDate"
      @change="search"
    />
    <input
      type="date"
      v-model="searchParams.endDate"
      @change="search"
    />
  </div>
</template>

<script>
export default {
  props: {
    categories: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      searchParams: {
        keyword: '',
        category: '',
        startDate: '',
        endDate: ''
      }
    }
  },
  methods: {
    search() {
      this.$emit('search', this.searchParams)
    }
  }
}
</script>

集成Vuex

与Vuex集成的搜索组件：

<template>
  <input
    v-model="searchQuery"
    @input="updateSearchQuery"
    placeholder="Search..."
  />
</template>

<script>
import { mapActions } from 'vuex'

export default {
  computed: {
    searchQuery: {
      get() {
        return this.$store.state.search.query
      },
      set(value) {
        this.setSearchQuery(value)
      }
    }
  },
  methods: {
    ...mapActions(['setSearchQuery', 'search']),
    updateSearchQuery() {
      this.search(this.searchQuery)
    }
  }
}
</script>

样式优化

添加现代UI风格的搜索组件：

<template>
  <div class="modern-search">
    <div class="search-icon">🔍</div>
    <input
      v-model="searchQuery"
      @input="handleSearch"
      placeholder="Search anything..."
    />
  </div>
</template>

<style>
.modern-search {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 24px;
  padding: 8px 16px;
  width: 300px;
}
.modern-search input {
  border: none;
  background: transparent;
  padding: 8px;
  width: 100%;
  outline: none;
}
.search-icon {
  margin-right: 8px;
  opacity: 0.5;
}
</style>

这些实现方案覆盖了从基础到高级的搜索组件需求，可以根据具体项目需求选择合适的实现方式或组合使用多个功能。