vue.js 实现搜索
Vue.js 实现搜索功能的方法
基础搜索实现
在Vue中实现搜索功能通常需要结合v-model和计算属性。创建一个输入框绑定到数据属性，使用计算属性过滤列表。
<template>
<div>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
}
},
computed: {
filteredList() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>使用debounce优化性能
频繁触发搜索会影响性能，可以使用lodash的debounce函数进行优化。
import { debounce } from 'lodash'
export default {
data() {
return {
searchQuery: '',
filteredItems: []
}
},
methods: {
search: debounce(function() {
this.filteredItems = this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}, 500)
},
watch: {
searchQuery() {
this.search()
}
}
}结合API实现远程搜索
当数据量较大时，可以调用API实现服务器端搜索。
export default {
methods: {
async searchItems() {
try {
const response = await axios.get('/api/items', {
params: { q: this.searchQuery }
})
this.items = response.data
} catch (error) {
console.error(error)
}
}
},
watch: {
searchQuery() {
this.searchItems()
}
}
}高级搜索组件实现
创建一个可复用的搜索组件，支持多种搜索条件和自定义样式。
<template>
<div class="search-component">
<input
v-model="internalValue"
@input="handleInput"
:placeholder="placeholder"
>
<button @click="clearSearch">清除</button>
</div>
</template>
<script>
export default {
props: {
value: String,
placeholder: {
type: String,
default: '请输入搜索内容'
}
},
data() {
return {
internalValue: this.value
}
},
methods: {
handleInput() {
this.$emit('input', this.internalValue)
},
clearSearch() {
this.internalValue = ''
this.handleInput()
}
},
watch: {
value(newVal) {
this.internalValue = newVal
}
}
}
</script>使用Vuex管理搜索状态
在大型应用中，可以使用Vuex集中管理搜索状态。
// store.js
export default new Vuex.Store({
state: {
searchQuery: '',
searchResults: []
},
mutations: {
SET_SEARCH_QUERY(state, query) {
state.searchQuery = query
},
SET_SEARCH_RESULTS(state, results) {
state.searchResults = results
}
},
actions: {
async searchItems({ commit, state }) {
const response = await api.search(state.searchQuery)
commit('SET_SEARCH_RESULTS', response.data)
}
}
})搜索高亮显示结果
在搜索结果中高亮显示匹配的文本部分。
methods: {
highlight(text) {
if (!this.searchQuery) return text
const regex = new RegExp(this.searchQuery, 'gi')
return text.replace(regex, match => `<span class="highlight">${match}</span>`)
}
}以上方法涵盖了从基础到高级的Vue.js搜索功能实现，可以根据具体需求选择适合的方案。
