DropdownMenu drop-down menu

introduce

Pop-down menu list.

Code Demo

Basic usage

<z-dropdown-menu>
   <z-dropdown-item v-model="value1" :options="option1" />
   <z-dropdown-item v-model="value2" :options="option2" />
</z-dropdown-menu>
import { ref } from 'vue'
const value1 = ref(0)
const value2 = ref('a')
const option1 = [
   { text: 'All products', value: 0 },
   { text: 'New product', value: 1 },
   { text: 'Activity product', value: 2 }
]
const option2 = [
   { text: 'Default sort', value: 'a' },
   { text: 'Praise sorting', value: 'b' },
   { text: 'Sales Sort', value: 'c' }
]

Customize menu content

The content of DropdownItem can be customized through slots. In this case, you need to use close on the DropdownMenu instance or specify the toggle method of DropdownItem to manually control the display of the menu.

<z-dropdown-menu>
   <z-dropdown-item v-model="value1" :options="option1" />
   <z-dropdown-item title="Filter" ref="item">
     <z-cell center title="Option 1">
       <template #right-icon>
         <z-switch v-model="switch1" />
       </template>
     </z-cell>
     <z-cell center title="Option 2">
       <template #right-icon>
         <z-switch v-model="switch2" />
       </template>
     </z-cell>
     <view style="padding: 10rpx 32rpx">
       <z-button
         type="primary"
         block
         round
         style="height: 80rpx"
         @click="onConfirm"
       >
         confirm
       </z-button>
     </view>
   </z-dropdown-item>
</z-dropdown-menu>
import { ref } from 'vue';
const value1 = ref(0)
const option1 = [
   { text: 'All products', value: 0 },
   { text: 'New product', value: 1 },
   { text: 'Activity product', value: 2 }
]
const item = ref()
const switch1 = ref(true)
const switch2 = ref(false)
const onConfirm = () => {
   item.value?.toggle()
}

Customize selected color

The selected color of menu titles and options can be customized through the active-color attribute.

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

Horizontal scrolling

The scrolling threshold can be customized through the swipe-threshold property.

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

Expand upward

Set the direction attribute value to up to expand the menu upwards.

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

Disable menu

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

API

ParametersDescriptionTypeDefault value
active-colorThe selected state color of menu titles and optionsstring#1989fa
directionMenu expansion direction, optional value is upstringdown
z-indexMenu bar z-index levelnumber | string10
durationanimation duration in milliseconds, set to 0 to disable animationnumber | string200
overlaywhether to display the mask layerbooleantrue
close-on-click-overlayWhether to close the menu after clicking the overlaybooleantrue
close-on-click-outsideWhether to close the menu after clicking on an external elementbooleantrue
swipe-thresholdScroll threshold, when the number of options exceeds the threshold and the total width exceeds the menu bar width, horizontal scrolling can be performednumber | string-
ParametersDescriptionTypeDefault value
v-modelThe value corresponding to the currently selected itemnumber | string-
titleMenu item titlestringCurrently selected item text
optionsoptions arrayOption[]
disabledWhether to disable the menubooleanfalse
title-classTitle extra class namestring | Array | object-
Event nameDescriptionCallback parameters
changeTriggered when clicking an option causes value to changevalue
openTriggered when the menu bar is opened-
closeTriggered when closing the menu bar-
openedTriggered after the menu bar is opened and the animation ends-
closedTriggered after the menu bar is closed and the animation ends-
NameDescription
defaultmenu content
titleCustom menu item title

Through ref, you can get the DropdownMenu instance and call the instance method.

Method nameDescriptionParametersReturn value
closeClose the display state of all menus--

Through ref, you can get the DropdownItem instance and call the instance method.

Method nameDescriptionParametersReturn value
toggleSwitch the menu display state, pass true to display, false to hide, pass no parameter to negateshow?: boolean-

Option data structure

Key nameDescriptionType
texttextstring
valueidentifiernumber | string | boolean
iconThe icon name or image link on the left, which is equivalent to the name attribute of the Icon componentstring

Theme customization

Style variables

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

NameDefaultDescription
--z-dropdown-menu-height96rpx-
--z-dropdown-menu-backgroundvar(--z-background-2)-
--z-dropdown-menu-shadow0 4rpx 24rpx fade(var(--z-gray-7), 12)-
--z-dropdown-menu-title-font-size30rpx-
--z-dropdown-menu-title-text-colorvar(--z-text-color)-
--z-dropdown-menu-title-active-text-colorvar(--z-primary-color)-
--z-dropdown-menu-title-disabled-text-colorvar(--z-text-color-2)-
--z-dropdown-menu-title-padding0 var(--z-padding-xs)-
--z-dropdown-menu-title-line-heightvar(--z-line-height-lg)-
--z-dropdown-menu-option-active-colorvar(--z-primary-color)-
--z-dropdown-menu-content-max-height80%-
--z-dropdown-item-z-index10-