默认主题
下拉菜单

示例

基础用法

一个完整的菜单需要用到DropdownDropdownMenuDropdownItem三个组件。Dropdown会将第一个子元素作为触发器,第二个元素为菜单DropdownMenu

Tooltip一样,在Intact下,Dropdown会返回两个元素(触发器和菜单),而不是将它们包裹起来,作为一个元素返回,所以不要将它作为模板的顶级元素,例如本例中,用<div>将之包裹起来才能作为模板元素返回。

@since 0.9.0 DropdownVue/React下渲染不会被元素包裹,这可能会影响你之前项目中定义的样式,如需渲染包裹元素,请做如下配置

import {configure} from 'kpc/components/utils';

// 该配置全局生效
configure({useWrapper: true});
index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
触发方式

Dropdown提供了两种触发方式来弹窗菜单,hover悬停触发(默认),click点击触发。通过trigger属性来指定它们。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
菜单位置

通过position属性,可以定义菜单相对触发器的位置。位置对象中my指菜单,at指触发器

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
禁用菜单(项)

通过给DropdownDropdownItem添加disabled属性,可以分别禁用菜单和菜单项。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
嵌套菜单

Dropdown可以嵌套使用,实现级联菜单。子菜单需要指定展示的位置position。我们还可以通过trigger单独子菜单触发方式。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
菜单项添加Tooltip提示

使用Tooltip包裹需要提示的菜单项DropdownItem即可添加提示,需要注意的是:在Intact下,当用Tooltip包裹触发器时,需要使用另外的元素将它包裹起来,因为Tooltip实际返回的是两个元素,一个是它的触发器,一个是提示内容层。而Dropdown的触发器只能接受一个元素,所以需要另外再包起来(如本例中item 4)。Vue下不需要,因为Vue不支持返回多元素,本身就会被包裹。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
菜单项添加Checkbox

DropdownItem中使用Checkbox,需要注意的是:

如果给DropdownItem绑定select事件,该事件会触发两次,这是因为,Checkbox会使用label包裹input元素,两次事件,一次来源于label,另一次来源于input,所以当你需要自己在select中处理选中的值时,需要阻止label click事件的默认行为

Radio也类似

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
right click this area to show context menu
右键菜单

DropdownMenu作为顶层元素,而不是Dropdown的子元素,然后指定of属性为事件对象,即可以实现跟随鼠标位置的弹出菜单

这里将position属性指定为left+1是为了避免弹出菜单立即被选中第一项

React下事件对象会复用,我们不能在异步函数中调用事件对象的属性和方法,如果需要保留事件对象,需要调用event.persist()方法 https://reactjs.org/docs/events.html#event-pooling

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

kpc/component/dropdown暴露出来的并非Dropdown组件本身,而是包装该组件的函数(vdt中称作宏函数)所以不要试图继承它。

属性

Dropdown

属性 说明 类型 默认值
trigger 触发方式,hover为悬停触发,click为点击触发 "hover" | "click" "hover"
disabled 是否禁用整个菜单 Boolean false
position 菜单弹出的位置,默认在触发器正下方向下偏移5px的地方 Object {my: 'center top+5', 'center bottom'}
value 是否将弹出菜单展示出来,可通过v-model双向绑定 Boolean false
of 弹出菜单的位置是相对当前触发元素,还是触发元素所在的菜单元素,这在嵌套菜单中可能会用到,可以使所有子菜单保持统一的对齐方式,例如:级联选择(Cascader)组件 "self" | "parent" "self"
container 指定弹出菜单追加的位置,默认:Dialog类型的组件会追加到Dialog中,其他会追加到body中。你可以传入函数返回一个DOM用来作为插入的容器,或者传入字符串用来给querySelector进行查询 Function | String undefined

DropdownItem

属性 说明 类型 默认值
disabled 是否禁用该菜单项 Boolean false
hideOnSelect 是否选中该菜单后隐藏整个菜单 Boolean true

事件

DropdownMenu

事件名 说明 参数
show 菜单展示事件 -

DropdownItem

事件名 说明 参数
select 菜单项被选中时触发,不管是点击还是键盘操作选中 被选中的DropdownItem实例
click 菜单项被点击时触发 Event
mouseenter 鼠标进入菜单项时触发 Event
mouseleave 鼠标离开菜单项时触发 Event