Vant DropdownMenu 下拉菜单带搜索功能

效果图：



上代码：

 <van-dropdown-menu active-color="#E33737"><van-dropdown-item ref="dropdownItem"><template #title><span>{{ dropdownItem.text }}</span></template><div class="dropdown_search"><van-search shape="round" v-model="searchValue" placeholder="请输入搜索关键词" @input="searchFun" /></div><div class="dropdown_radio"><van-radio-group v-model="dropdownValue"><van-cell-group><van-cell v-for="(item, index) in dropdownFilterActions" :key="index" :value="item.text" clickable center@click="onChangeSelect(item.value)"><template #right-icon><van-radio :name="item.value" /></template></van-cell></van-cell-group></van-radio-group></div></van-dropdown-item></van-dropdown-menu>data() {return {dropdownValue: '',dropdownItem: { text: '全部', value: '730' },searchValue: '',dropdownFilterActions: [], //过滤的数据dropdownActions: [ //原数据{ text: '近一周', value: '7' },{ text: '近一个月', value: '30' },{ text: '近一年', value: '365' },{ text: '全部', value: '730' }]}}created() {this.dropdownFilterActions = this.dropdownActions},methods: {searchFun() {if (this.searchValue === '' || this.searchValue === null) {this.dropdownFilterActions = this.dropdownActions;} else {this.dropdownFilterActions = this.dropdownActions.filter(item => item.text.includes(this.searchValue))}},onChangeSelect(value) {this.dropdownItem = this.dropdownFilterActions.find(item => {return item.value === value;});this.searchValue = '';this.searchFun();this.$refs.dropdownItem.toggle()this.dropdownValue = value;},
}<style lang="less" scoped>
.dropdown_search {position: sticky;top: 0;left: 0;z-index: 99;
}.dropdown_radio {:deep(.van-cell__value--alone) {text-align: center;}:deep(.van-radio__icon .van-icon) {border: unset;background: unset;border-color: unset;font-size: @-size-m;}:deep(.van-radio__icon--checked .van-icon) {color: @-color-primary;}
}
</style>