DropdownMenu 下拉菜单

菜单呈现数个并列的选项类目,用于整个页面的内容筛选,由菜单面板和菜单选项组成。

演示

9:41

代码示例

<re-dropdown-menu>
  <re-dropdown-item :options="productOptions" placement="right" :value="productValue" @change="onProductChange" />
  <re-dropdown-item :options="sorterOptions" placement="right" :defaultValue="sorterDefaultValue" />
  <re-dropdown-menu>
  <re-dropdown-item label="单列多选" :options="multipleSelectOptions" :value="multipleSelectValue" multiple @change="onMultipleSelectChange" />
  <re-dropdown-item label="双列多选" optionsColumns="2" :options="doubleColumnsOptions" :defaultValue="doubleColumnsDefaultValue" multiple />
  <re-dropdown-item label="三列多选" optionsColumns="3" :options="tripleColumnsOptions" :defaultValue="tripleColumnsDefaultValue" multiple />
  <re-dropdown-menu>
  <re-dropdown-item label="树形双列" optionsLayout="tree" :options="doubleColumnsTreeOptions" :value="doubleColumnsTreeValue" @change="onDoubleColumnsTreeChange" />
  <re-dropdown-item label="选项最多八字树形三列" optionsLayout="tree" :options="tripleColumnsTreeOptions" :defaultValue="tripleColumnsTreeDefaultValue" multiple />
  <re-dropdown-menu>
  <re-dropdown-item disabled label="禁用菜单" />
  <re-dropdown-item disabled label="禁用菜单" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-dropdown-menu />。

API

名称类型默认值描述必传
arrowIconstring'caret-down-small'-N
closeOnClickOverlaybooleantrue-N
durationstring | number200-N
showOverlaybooleanfalse-N
zIndexnumber11600层级N
customStylestring''自定义样式N
名称参数描述
open-打开时触发
close-关闭时触发
名称描述
default默认插槽
名称类型默认值描述必传
disabledbooleanfalse是否禁用N
keysKeysMap() : KeysMap => ({-N
labelstring--N
multipleboolean--N
optionsArray<DropdownOption>--N
optionsColumnsstring | number--N
optionsLayoutstring--N
placementstring--N
valueDropdownValue-当前值N
defaultValueDropdownValue--N
customStylestring-自定义样式N
名称参数描述
changevalue: any值变化时触发
update:valuevalue: any-
close-关闭时触发
closed--
confirmvalue: any确认时触发
reset-重置时触发
opened--
open-打开时触发
名称描述
default默认插槽