向下彈出的菜單列表。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
const app = createApp();
app.use(DropdownMenu);
app.use(DropdownItem);
<van-dropdown-menu>
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" />
</van-dropdown-menu>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
value1: 0,
value2: 'a',
});
const option1 = [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活動(dòng)商品', value: 2 },
];
const option2 = [
{ text: '默認(rèn)排序', value: 'a' },
{ text: '好評排序', value: 'b' },
{ text: '銷量排序', value: 'c' },
];
return {
state,
option1,
option2,
};
},
};
通過插槽可以自定義 DropdownItem 的內(nèi)容,此時(shí)需要使用實(shí)例上的 toggle 方法手動(dòng)控制菜單的顯示。
<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="團(tuán)購">
<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>
import { ref, reactive } from 'vue';
export default {
setup() {
const item = ref(null);
const state = reactive({
value: 0,
switch1: false,
switch2: false,
});
const options = [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活動(dòng)商品', value: 2 },
];
const onConfirm = () => {
item.value.toggle();
};
return {
item,
state,
options,
onConfirm,
};
},
};
通過 active-color 屬性可以自定義菜單標(biāo)題和選項(xiàng)的選中態(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>
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
active-color | 菜單標(biāo)題和選項(xiàng)的選中態(tài)顏色 | string | #ee0a24
|
direction | 菜單展開方向,可選值為up
|
string | down
|
z-index | 菜單欄 z-index 層級 | number | string | 10
|
duration | 動(dòng)畫時(shí)長,單位秒,設(shè)置為 0 可以禁用動(dòng)畫 | number | string | 0.2
|
overlay | 是否顯示遮罩層 | boolean | true
|
close-on-click-overlay | 是否在點(diǎn)擊遮罩層后關(guān)閉菜單 | boolean | true
|
close-on-click-outside | 是否在點(diǎn)擊外部元素后關(guān)閉菜單 | boolean | true
|
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
v-model | 當(dāng)前選中項(xiàng)對應(yīng)的 value | number | string | - |
title | 菜單項(xiàng)標(biāo)題 | string | 當(dāng)前選中項(xiàng)文字 |
options | 選項(xiàng)數(shù)組 | Option[] | []
|
disabled | 是否禁用菜單 | boolean | false
|
lazy-render | 是否在首次展開時(shí)才渲染菜單內(nèi)容 | boolean | true
|
title-class | 標(biāo)題額外類名 | string | Array | object | - |
teleport | 指定掛載的節(jié)點(diǎn),等同于 Teleport 組件的 to 屬性 | string | Element | - |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
change | 點(diǎn)擊選項(xiàng)導(dǎo)致 value 變化時(shí)觸發(fā) | value |
open | 打開菜單欄時(shí)觸發(fā) | - |
close | 關(guān)閉菜單欄時(shí)觸發(fā) | - |
opened | 打開菜單欄且動(dòng)畫結(jié)束后觸發(fā) | - |
closed | 關(guān)閉菜單欄且動(dòng)畫結(jié)束后觸發(fā) | - |
名稱 | 說明 |
---|---|
default | 菜單內(nèi)容 |
title | 自定義菜單項(xiàng)標(biāo)題 |
通過 ref 可以獲取到 DropdownItem 實(shí)例并調(diào)用實(shí)例方法,詳見組件實(shí)例方法。
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
toggle | 切換菜單展示狀態(tài),傳 true 為顯示,false 為隱藏,不傳參為取反 |
show?: boolean | - |
鍵名 | 說明 | 類型 |
---|---|---|
text | 文字 | string |
value | 標(biāo)識符 | number | string |
icon | 左側(cè)圖標(biāo)名稱或圖片鏈接 | string |
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-dropdown-menu-height | 48px | - |
--van-dropdown-menu-background-color | var(--van-white) | - |
--van-dropdown-menu-box-shadow | 0 2px 12px fade(var(--van-gray-7), 12) | - |
--van-dropdown-menu-title-font-size | 15px | - |
--van-dropdown-menu-title-text-color | var(--van-text-color) | - |
--van-dropdown-menu-title-active-text-color | var(--van-danger-color) | - |
--van-dropdown-menu-title-disabled-text-color | var(--van-gray-6) | - |
--van-dropdown-menu-title-padding | 0 var(--van-padding-xs) | - |
--van-dropdown-menu-title-line-height | var(--van-line-height-lg) | - |
--van-dropdown-menu-option-active-color | var(--van-danger-color) | - |
--van-dropdown-menu-content-max-height | 80% | - |
--van-dropdown-item-z-index | 10 | - |
把 DropdownMenu 嵌套在 Tabs 等組件內(nèi)部使用時(shí),可能會遇到下拉菜單位置錯(cuò)誤的問題。這是因?yàn)樵?Chrome 瀏覽器中,transform 元素內(nèi)部的 fixed 布局會降級成 absolute 布局,導(dǎo)致下拉菜單的布局異常。
將 DropdownItem 的 teleport 屬性設(shè)置為 body 即可避免此問題:
<van-dropdown-menu>
<van-dropdown-item teleport="body" />
<van-dropdown-item teleport="body" />
</van-dropdown-menu>
更多建議: