DropdownMenu drop-down menu

introduce

Pop-down menu list.

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>

DropdownMenu Props

DropdownItem Props

DropdownItem Events

DropdownItem Slots

DropdownMenu method

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

DropdownItem method

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

Option data structure

Style variables

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