vue实现搜索组件
Vue 实现搜索组件的方法
基础搜索组件实现
创建一个简单的搜索输入框，绑定数据并使用v-model实现双向绑定：
<template>
<div class="search-box">
<input
type="text"
v-model="searchQuery"
placeholder="搜索..."
@input="handleSearch"
/>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: ''
}
},
methods: {
handleSearch() {
this.$emit('search', this.searchQuery)
}
}
}
</script>添加防抖优化
为防止频繁触发搜索，使用lodash.debounce实现防抖：
import debounce from 'lodash.debounce'
export default {
methods: {
handleSearch: debounce(function() {
this.$emit('search', this.searchQuery)
}, 300)
}
}搜索结果显示
结合列表组件显示搜索结果：
<template>
<div>
<search-component @search="performSearch"/>
<ul v-if="results.length">
<li v-for="item in results" :key="item.id">
{{ item.name }}
</li>
</ul>
<p v-else>没有找到结果</p>
</div>
</template>
<script>
export default {
data() {
return {
results: []
}
},
methods: {
performSearch(query) {
// 调用API或过滤本地数据
this.results = this.items.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
)
}
}
}
</script>高级搜索功能
实现多条件搜索：
<template>
<div class="advanced-search">
<input v-model="filters.name" placeholder="名称"/>
<select v-model="filters.category">
<option value="">所有分类</option>
<option v-for="cat in categories" :value="cat">{{cat}}</option>
</select>
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
data() {
return {
filters: {
name: '',
category: ''
},
categories: ['电子产品', '服装', '食品']
}
},
methods: {
search() {
this.$emit('search', {...this.filters})
}
}
}
</script>使用Vuex管理搜索状态
对于大型应用，可以使用Vuex集中管理搜索状态：
// store/modules/search.js
const state = {
query: '',
results: []
}
const mutations = {
SET_QUERY(state, query) {
state.query = query
},
SET_RESULTS(state, results) {
state.results = results
}
}
const actions = {
async search({commit}, query) {
commit('SET_QUERY', query)
const res = await api.search(query)
commit('SET_RESULTS', res.data)
}
}样式优化
添加基本样式增强用户体验：
.search-box {
position: relative;
margin: 20px 0;
}
.search-box input {
padding: 8px 15px;
width: 300px;
border: 1px solid #ddd;
border-radius: 4px;
}
.search-box input:focus {
outline: none;
border-color: #42b983;
}这些方法涵盖了从基础到高级的Vue搜索组件实现，可以根据项目需求选择合适的方案或组合使用。
