DropdownMenu 引入

在app.json或index.json中引入組件

"usingComponents": {"van-dropdown-menu": "@vant/weapp/dropdown-menu/index","van-dropdown-item": "@vant/weapp/dropdown-item/index"
}

頁面使用

下面是完成的使用步驟

index.wxml

<view class="seach-Main"><view class="class-main"><van-dropdown-menu active-color="#FFD69A" custom-class="menuMain" ><van-dropdown-itemtitle-class="ItemMain"value="{{ value1 }}" options="{{ option1 }}"bind:change="onDropDownChange" id="item"/></van-dropdown-menu></view><van-search class="search-text" background="#000000" value="{{ value }}" placeholder="請輸入產品編號/名稱" placeholder-style="font-size:28rpx;" clearable="true" use-action-slot left-icon="search" bind:focus="onFocusClick" bind:change="onChange" bind:search="submitHandle"><view slot="action" bind:tap="submitHandle" style="color: #FFFFFF;">搜索</view></van-search></view>

index.scss

  .seach-Main {display: flex;justify-content: space-around;width: 100%;align-items: center;position: relative;.search-text {width: 100%;}.search-image {display: flex;position: absolute;width: 44rpx;left: 40rpx;image {width: 44rpx;height: 44rpx;}}}.seach-Main .van-search__content--square {background-color: var(--bannerBgColor) !important;border-radius: 10rpx 10rpx 10rpx 10rpx;border: 2rpx solid var(--bannerBgColor);}.seach-Main .cell-index--van-cell__value {text-align: left;}.seach-Main .van-field__control {color: var(--titleColor);}.seach-Main .van-cell__left-icon-wrap {color: var(--titleColor) !important;}// 選擇.class-main {.menuMain {background-color: var(--mainBgColor);}.ItemMain {color: var(--titleColor);}}.van-cell {background-color: var(--bannerBgColor) !important;color: var(--titleColor) !important;border: none;}/* 樣式文件 */.class-main .van-cell::after {border: none;}

上面var()都是引用的公共樣式，可以換成自己項目需要的樣式。

index.ts(重點)

在這里，需要實現輸入框選中時，van-dropdown-menu組件需要關閉。所以在輸入框組件里增加了bind:focus="onFocusClick"方法。在這個方法里面實現關閉操作。

// 輸入框聚焦關閉組件onFocusClick() {this.selectComponent('#item').toggle(false);},

剛開始沒注意官方文檔的說明，現將該方法著重展示出來。

index.ts(全部)

Page({/*** 頁面的初始數據*/data: {value1: '',option1: [{ text: '全部', value: '' },{ text: '干貨', value: 'GH' },{ text: '調味', value: 'TW' },],groupType:'', // 分類searchField:'',// 輸入框搜索內容
},
// 輸入框聚焦關閉onFocusClick() {this.selectComponent('#item').toggle(false);},// 篩選onDropDownChange(e: any) {let index = e.detailif (index == 0 && this.data.value1 == 0) {index = ''}this.setData({'groupType': index,})},// 輸入框值改變時的方法onChange(e: any) {this.setData({searchField: e.detail,});// 調用搜索接口},// 點擊搜索按鈕方法submitHandle() {this.selectComponent('#item').toggle(false); // 關閉彈框var vkey = this.data.value;if (vkey) {// 搜索關鍵字不為空時的操作} else {// 搜索關鍵字為空時的操作}},)}

最終效果如下：