Vant4 DropdownMenu 下拉菜單

介紹

向下彈出的菜單列表。

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

const app = createApp();
app.use(DropdownMenu);
app.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>

import { ref } from 'vue';

export default {
  setup() {
    const value1 = ref(0);
    const value2 = ref('a');
    const option1 = [
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活動(dòng)商品', value: 2 },
    ];
    const option2 = [
      { text: '默認(rèn)排序', value: 'a' },
      { text: '好評(píng)排序', value: 'b' },
      { text: '銷量排序', value: 'c' },
    ];

    return {
      value1,
      value2,
      option1,
      option2,
    };
  },
};

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

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

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

import { ref } from 'vue';

export default {
  setup() {
    const item = ref(null);
    const value = ref(0);
    const switch1 = ref(false);
    const switch2 = ref(false);
    const options = [
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活動(dòng)商品', value: 2 },
    ];
    const onConfirm = () => {
      item.value.toggle();
    };

    return {
      item,
      value,
      switch1,
      switch2,
      options,
      onConfirm,
    };
  },
};

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

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

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

向上展開(kāi)

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

<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>

API

DropdownMenu Props

DropdownItem Props

DropdownItem Events

DropdownItem Slots

DropdownItem 方法

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

類型定義

組件導(dǎo)出以下類型定義：

import type {
  DropdownMenuProps,
  DropdownItemProps,
  DropdownItemOption,
  DropdownItemInstance,
  DropdownMenuDirection,
} from 'vant';

?DropdownItemInstance? 是組件實(shí)例的類型，用法如下：

import { ref } from 'vue';
import type { DropdownItemInstance } from 'vant';

const dropdownItemRef = ref<DropdownItemInstance>();

dropdownItemRef.value?.toggle();

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

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。

常見(jiàn)問(wèn)題

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

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

將 ?DropdownItem? 的 ?teleport? 屬性設(shè)置為 ?body? 即可避免此問(wèn)題：

<van-dropdown-menu>
  <van-dropdown-item teleport="body" />
  <van-dropdown-item teleport="body" />
</van-dropdown-menu>