vue实现搜索组件

Vue 实现搜索组件的方法

基础搜索组件实现

创建基础搜索组件需要包含输入框和搜索按钮。在Vue中可以使用v-model绑定输入值，通过@click或@keyup.enter触发搜索。

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      @keyup.enter="handleSearch" 
      placeholder="输入搜索内容"
    />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

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

防抖优化

频繁触发搜索会影响性能，可以使用防抖技术优化。Lodash的debounce方法或自定义实现均可。

<script>
import { debounce } from 'lodash'

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

异步搜索实现

对于需要API请求的搜索，可以使用async/await处理异步操作。

<script>
export default {
  methods: {
    async handleSearch() {
      try {
        const results = await api.search(this.searchQuery)
        this.$emit('results', results)
      } catch (error) {
        console.error('搜索失败:', error)
      }
    }
  }
}
</script>

搜索结果展示

搜索结果通常以列表形式展示，可以使用v-for渲染。

<template>
  <div>
    <search-component @search="handleSearch" />
    <ul v-if="results.length">
      <li v-for="item in results" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
    <p v-else>暂无结果</p>
  </div>
</template>

样式优化

添加CSS样式提升用户体验，如加载状态、空状态等。

.search-container {
  display: flex;
  gap: 10px;
}

.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

组件参数化

通过props使组件更灵活，可配置placeholder、按钮文本等。

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: '搜索...'
    },
    buttonText: {
      type: String,
      default: '搜索'
    }
  }
}
</script>