引入

import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';

Vue.use(DropdownMenu);
Vue.use(DropdownItem);

基礎(chǔ)用法

<van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

export default {
  data() {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活動商品', value: 2 },
      ],
      option2: [
        { text: '默認(rèn)排序', value: 'a' },
        { text: '好評排序', value: 'b' },
        { text: '銷量排序', value: 'c' },
      ],
    };
  },
};

自定義菜單內(nèi)容

通過插槽可以自定義 DropdownItem 的內(nèi)容，此時需要使用實例上的 toggle 方法手動控制菜單的顯示。

<van-dropdown-menu>
  <van-dropdown-item v-model="value" :options="option" />
  <van-dropdown-item title="篩選" ref="item">
    <van-cell center title="包郵">
      <template #right-icon>
        <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <van-cell center title="團購">
      <template #right-icon>
        <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round @click="onConfirm">
        確認(rèn)
      </van-button>
    </div>
  </van-dropdown-item>
</van-dropdown-menu>

export default {
  data() {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活動商品', value: 2 },
      ],
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
  },
};

自定義選中態(tài)顏色

通過 active-color 屬性可以自定義菜單標(biāo)題和選項的選中態(tài)顏色。

<van-dropdown-menu active-color="#1989fa">
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

向上展開

將 direction 屬性值設(shè)置為 up，菜單即可向上展開。

<van-dropdown-menu direction="up">
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

禁用菜單

<van-dropdown-menu>
  <van-dropdown-item v-model="value1" disabled :options="option1" />
  <van-dropdown-item v-model="value2" disabled :options="option2" />
</van-dropdown-menu>

DropdownMenu Props

DropdownItem Props

DropdownItem Events

DropdownItem Slots

DropdownItem 方法

通過 ref 可以獲取到 DropdownItem 實例并調(diào)用實例方法，詳見組件實例方法。

Option 數(shù)據(jù)結(jié)構(gòu)

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。

父元素設(shè)置 transform 后，下拉菜單的位置錯誤？

把 DropdownMenu 嵌套在 Tabs 等組件內(nèi)部使用時，可能會遇到下拉菜單位置錯誤的問題。這是因為在 Chrome 瀏覽器中，transform 元素內(nèi)部的 fixed 布局會降級成 absolute 布局，導(dǎo)致下拉菜單的布局異常。

將 DropdownItem 的 get-container 屬性設(shè)置為 body 即可避免此問題：

<van-dropdown-menu>
  <van-dropdown-item get-container="body" />
  <van-dropdown-item get-container="body" />
</van-dropdown-menu>