基于vant组件写一个带有搜索功能选择器
时间: 2023-12-06 08:05:34 浏览: 31
好的,以下是一个基于Vant组件的带有搜索功能的选择器示例代码:
```
<template>
<div>
<van-search v-model="search" placeholder="搜索" />
<van-picker
v-model="selected"
:columns="filteredOptions"
@change="onPickerChange"
:title="title"
:loading="loading"
:show-toolbar="false"
>
<template #columns="{ column, index }">
{{ column.text }}
</template>
</van-picker>
</div>
</template>
<script>
export default {
data() {
return {
selected: [], // 选中的值
options: [ // 所有选项
{ text: '选项1', value: 'option1' },
{ text: '选项2', value: 'option2' },
{ text: '选项3', value: 'option3' },
{ text: '选项4', value: 'option4' },
{ text: '选项5', value: 'option5' }
],
search: '', // 搜索框输入的值
filteredOptions: [], // 根据搜索框过滤后的选项
loading: false // 是否在加载过程中
}
},
computed: {
title() {
return this.loading ? '加载中...' : '请选择'
}
},
methods: {
onPickerChange(value) {
this.selected = value
},
filterOptions() {
this.loading = true
setTimeout(() => {
this.filteredOptions = this.options.filter(option =>
option.text.includes(this.search)
)
this.loading = false
}, 500)
}
},
watch: {
search() {
this.filterOptions()
}
}
}
</script>
```
在上述代码中,我们使用了Vant组件库的Search组件和Picker组件。当用户在搜索框中输入内容时,我们根据用户输入过滤选项,并在Picker组件中显示过滤后的选项。在过滤选项的过程中,我们使用了loading属性来显示加载状态,防止用户过快地输入导致滞后。