Press UI

The menu list that pops up down.

# Code Demo

# Basic usage

<press-dropdown-menu>
   <press-dropdown-item
     :value="value1"
     :options="option1"
   />
   <press-dropdown-item
     :value="value2"
     :options="option2"
   />
</press-dropdown-menu>

export default {
   data() {
     return {
       option1: [
         { text: 'All Products', value: 0 },
         { text: 'New product', value: 1 },
         { text: 'Event Item', value: 2 },
       ],
       option2: [
         { text: 'Default sort', value: 'a' },
         { text: 'Praise order', value: 'b' },
         { text: 'Sales sort', value: 'c' },
       ],
       value1: 0,
       value2: 'a',
     }
   },
};

# Customize menu content

<press-dropdown-menu>
   <press-dropdown-item
     :value="value1"
     :options="option1"
   />
   <press-dropdown-item
     id="item"
     :title="itemTitle"
   >
     <press-cell :title="switchTitle1">
       <press-switch
         slot="right-icon"
         size="24px"
         style="height: 26px"
         :checked="switch1"
         active-color="#ee0a24"
         @change="onSwitch1Change"
       />
     </press-cell>
     <press-cell :title="switchTitle2">
       <press-switch
         slot="right-icon"
         size="24px"
         style="height: 26px"
         :checked="switch2"
         active-color="#ee0a24"
         @change="onSwitch2Change"
       />
     </press-cell>
     <div style="padding: 5px 16px;">
       <press-button
         type="danger"
         block
         round
         @click="onConfirm"
       >
         confirm
       </press-button>
     </div>
   </press-dropdown-item>
</press-dropdown-menu>

export default {
   data() {
     return {
       switchTitle1: 'free shipping',
       switchTitle2: 'Group purchase',
       itemTitle: 'filter',
       option1: [
         { text: 'All Products', value: 0 },
         { text: 'New product', value: 1 },
         { text: 'Event Item', value: 2 },
       ],
       value1: 0,
     }
   },
   methods: {
     onConfirm() {
       this.selectComponent('#item').toggle();
     },

     onSwitch1Change({ detail }) {
       this.setData({ switch1: detail });
     },

     onSwitch2Change({ detail }) {
       this.setData({ switch2: detail });
     },
   }
};

# Customize the selected state color

<press-dropdown-menu active-color="#1989fa">
   <press-dropdown-item
     :value="value1"
     :options="option1"
   />
   <press-dropdown-item
     :value="value2"
     :options="option2"
   />
</press-dropdown-menu>

# expand up

<press-dropdown-menu direction="up">
   <press-dropdown-item
     :value="value1"
     :options="option1"
   />
   <press-dropdown-item
     :value="value2"
     :options="option2"
   />
</press-dropdown-menu>

# Disable menu

<press-dropdown-menu>
   <press-dropdown-item
     :value="value1"
     disabled
     :options="option1"
   />
   <press-dropdown-item
     :value="value2"
     disabled
     :options="option2"
   />
</press-dropdown-menu>

# API

Parameter Description Type Default
active-color Active color of menu title and options string #ee0a24
z-index menu bar z-index level number 10
duration animation duration in milliseconds number 200
direction menu expansion direction, optional value is up string down
overlay Whether to show the overlay boolean true
close-on-click-overlay Whether to close the menu after clicking the overlay boolean true
close-on-click-outside Whether to close the menu after clicking outside menu boolean true
Parameter Description Type Default
value The value corresponding to the currently selected item number | string -
title menu item title string current selected item text
options array of options Option[] []
disabled Whether to disable the menu boolean false
title-class title extra class name string -
popup-style custom popup layer style string -
Event Name Description Callback Parameters
change Triggered when an option is clicked resulting in a change in value value
open Triggered when the menu bar is opened -
close Triggered when the menu bar is closed -
opened Triggered when the menu bar is opened and the animation ends -
closed Triggered when the menu bar is closed and the animation ends -

Accessible via selectComponent(id).

method name description parameters return value
toggle Toggle menu display status, pass true to display, false to hide, no parameter to negate show?: boolean -

# Option Data Structure

key name description type
text text string
value identifier number | string
icon Left icon name or image link string

# External style classes

class name description
custom-class root node style class
横屏

← Guide →