/*! For license information please see 2442.25216159.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["2442"],{45355:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

DropdownMenu

\n

Intro

\n

The menu list that pops down downwards.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { DropdownMenu, DropdownItem } from 'vant';\n\nconst app = createApp();\napp.use(DropdownMenu);\napp.use(DropdownItem);\n
\n

Usage

\n

Basic Usage

\n
<van-dropdown-menu>\n  <van-dropdown-item v-model="value1" :options="option1" />\n  <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value1 = ref(0);\n    const value2 = ref('a');\n    const option1 = [\n      { text: 'Option1', value: 0 },\n      { text: 'Option2', value: 1 },\n      { text: 'Option3', value: 2 },\n    ];\n    const option2 = [\n      { text: 'Option A', value: 'a' },\n      { text: 'Option B', value: 'b' },\n      { text: 'Option C', value: 'c' },\n    ];\n\n    return {\n      value1,\n      value2,\n      option1,\n      option2,\n    };\n  },\n};\n
\n

Custom Content

\n
<van-dropdown-menu ref="menuRef">\n  <van-dropdown-item v-model="value" :options="options" />\n  <van-dropdown-item title="Title" ref="item">\n    <van-cell center title="Title">\n      <template #right-icon>\n        <van-switch v-model="switch1" />\n      </template>\n    </van-cell>\n    <van-cell center title="Title">\n      <template #right-icon>\n        <van-switch v-model="switch2" />\n      </template>\n    </van-cell>\n    <div style="padding: 5px 16px;">\n      <van-button type="primary" block round @click="onConfirm">\n        Confirm\n      </van-button>\n    </div>\n  </van-dropdown-item>\n</van-dropdown-menu>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const menuRef = ref(null);\n    const itemRef = ref(null);\n    const value = ref(0);\n    const switch1 = ref(false);\n    const switch2 = ref(false);\n    const options = [\n      { text: 'Option1', value: 0 },\n      { text: 'Option2', value: 1 },\n      { text: 'Option3', value: 2 },\n    ];\n    const onConfirm = () => {\n      item.value.toggle();\n      // or\n      // menuRef.value.close();\n    };\n\n    return {\n      menuRef,\n      itemRef,\n      value,\n      switch1,\n      switch2,\n      options,\n      onConfirm,\n    };\n  },\n};\n
\n

Custom Active Color

\n

Use active-color prop to custom active color of the title and options.

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

Swipe Items

\n

You can set swipe-threshold prop to customize threshold number.

\n
<van-dropdown-menu swipe-threshold="4">\n  <van-dropdown-item v-model="value1" :options="option1" />\n  <van-dropdown-item v-model="value2" :options="option2" />\n  <van-dropdown-item v-model="value2" :options="option2" />\n  <van-dropdown-item v-model="value2" :options="option2" />\n  <van-dropdown-item v-model="value2" :options="option2" />\n</van-dropdown-menu>\n
\n

Expand Direction

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

Disabled

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

API

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
active-colorActive color of title and optionstring#1989fa
directionExpand direction, can be set to upstringdown
z-indexz-index of menu itemnumber | string10
durationTransition duration, unit secondnumber | string0.2
overlayWhether to show overlaybooleantrue
close-on-click-overlayWhether to close when overlay is clickedbooleantrue
close-on-click-outsideWhether to close when outside is clickedbooleantrue
swipe-thresholdHorizontal scrolling is allowed when the number of items exceeds the threshold and the total width exceeds the width of the menu.number | string-
auto-locateWhen the ancestor element is set with a transform, the position of the dropdown menu will be automatically adjusted.booleanfalse
\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelValue of current optionnumber | string-
titleItem titlestringText of selected option
optionsOptionsOption[][]
disabledWhether to disable dropdown itembooleanfalse
lazy-renderWhether to lazy render util openedbooleantrue
title-classTitle classstring | Array | object-
teleportSpecifies a target element where DropdownItem will be mountedstring | Element-
\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
changeEmitted select option and value changedvalue: number | string
openEmitted when opening menu-
closeEmitted when closing menu-
openedEmitted when menu is opened-
closedEmitted when menu is closed-
\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultContent
titleCustom title
\n
\n

Use ref to get DropdownMenu instance and call instance methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionAttributeReturn value
closeClose all dropdown items--
\n
\n

Use ref to get DropdownItem instance and call instance methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionAttributeReturn value
toggleToggle displayshow?: boolean-
\n

Types

\n

The component exports the following type definitions:

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

DropdownMenuInstance and DropdownItemInstance are the types of component instances:

\n
import { ref } from 'vue';\nimport type { DropdownMenuInstance, DropdownItemInstance } from 'vant';\n\nconst dropdownMenuRef = ref<DropdownMenuInstance>();\nconst dropdownItemRef = ref<DropdownItemInstance>();\n\ndropdownMenuRef.value?.close();\ndropdownItemRef.value?.toggle();\n
\n

Data Structure of Option

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyDescriptionType
textTextstring
valueValuenumber | string | boolean
disabledWhether to disable optionboolean
iconLeft iconstring
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-dropdown-menu-height48px-
--van-dropdown-menu-backgroundvar(--van-background-2)-
--van-dropdown-menu-shadow0 2px 12px fade(var(--van-gray-7), 12)-
--van-dropdown-menu-title-font-size15px-
--van-dropdown-menu-title-text-colorvar(--van-text-color)-
--van-dropdown-menu-title-active-text-colorvar(--van-primary-color)-
--van-dropdown-menu-title-disabled-text-colorvar(--van-text-color-2)-
--van-dropdown-menu-title-padding0 var(--van-padding-xs)-
--van-dropdown-menu-title-line-heightvar(--van-line-height-lg)-
--van-dropdown-menu-option-active-colorvar(--van-primary-color)-
--van-dropdown-menu-option-disabled-colorvar(--van-text-color-3)-
--van-dropdown-menu-content-max-height80%-
--van-dropdown-item-z-index10-
\n
'},null,8,l))}}}]);