tangjinzhou
7 years ago
parent
aa1bcfe5db
commit
804a1eba18
@ -0,0 +1,30 @@
|
|||||||
|
<cn>
|
||||||
|
#### 基本
|
||||||
|
最简单的下拉菜单。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Basic
|
||||||
|
The most basic dropdown menu.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-dropdown>
|
||||||
|
<a class="ant-dropdown-link" href="#">
|
||||||
|
Hover me <a-icon type="down" />
|
||||||
|
</a>
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item>
|
||||||
|
<a href="javascript:;">1st menu item</a>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item>
|
||||||
|
<a href="javascript:;">2nd menu item</a>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item>
|
||||||
|
<a href="javascript:;">3rd menu item</a>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<cn>
|
||||||
|
#### 右键菜单
|
||||||
|
默认是移入触发菜单，可以鼠标右键触发。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Context Menu
|
||||||
|
The default trigger mode is `hover`, you can change it to `right click`.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-dropdown :trigger="['contextmenu']">
|
||||||
|
<span style="user-select: none">Right Click on Me</span>
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item key="1">1st menu item</a-menu-item>
|
||||||
|
<a-menu-item key="2">2nd menu item</a-menu-item>
|
||||||
|
<a-menu-item key="3">3rd menu item</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<cn>
|
||||||
|
#### 带下拉框的按钮
|
||||||
|
左边是按钮，右边是额外的相关功能菜单。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Button with dropdown menu
|
||||||
|
A button is on the left, and a related functional menu is on the right.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-dropdown-button @click="handleMenuClick">
|
||||||
|
Dropdown
|
||||||
|
<a-menu slot="overlay" @click="handleMenuClick">
|
||||||
|
<a-menu-item key="1">1st menu item</a-menu-item>
|
||||||
|
<a-menu-item key="2">2nd menu item</a-menu-item>
|
||||||
|
<a-menu-item key="3">3rd item</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown-button>
|
||||||
|
<a-dropdown-button
|
||||||
|
@click="handleButtonClick"
|
||||||
|
disabled
|
||||||
|
style="margin-left: 8px"
|
||||||
|
>
|
||||||
|
Dropdown
|
||||||
|
<a-menu slot="overlay" @click="handleMenuClick">
|
||||||
|
<a-menu-item key="1">1st menu item</a-menu-item>
|
||||||
|
<a-menu-item key="2">2nd menu item</a-menu-item>
|
||||||
|
<a-menu-item key="3">3rd item</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown-button>
|
||||||
|
<a-dropdown>
|
||||||
|
<a-menu slot="overlay" @click="handleMenuClick">
|
||||||
|
<a-menu-item key="1">1st menu item</a-menu-item>
|
||||||
|
<a-menu-item key="2">2nd menu item</a-menu-item>
|
||||||
|
<a-menu-item key="3">3rd item</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
<a-button style="margin-left: 8px">
|
||||||
|
Button <a-icon type="down" />
|
||||||
|
</a-button>
|
||||||
|
</a-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
handleButtonClick(e) {
|
||||||
|
console.log('click left button', e);
|
||||||
|
},
|
||||||
|
handleMenuClick(e) {
|
||||||
|
console.log('click', e);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<cn>
|
||||||
|
#### 触发事件
|
||||||
|
点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Click event
|
||||||
|
An event will be triggered when you click menu items, in which you can make different operations according to item's key.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-dropdown>
|
||||||
|
<a class="ant-dropdown-link" href="#">
|
||||||
|
Hover me, Click menu item <a-icon type="down" />
|
||||||
|
</a>
|
||||||
|
<a-menu slot="overlay" @click="onClick">
|
||||||
|
<a-menu-item key="1">1st menu item</a-menu-item>
|
||||||
|
<a-menu-item key="2">2nd menu item</a-menu-item>
|
||||||
|
<a-menu-item key="3">3rd menu item</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onClick({ key }) {
|
||||||
|
console.log(`Click on item ${key}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
<cn>
|
||||||
|
#### 菜单隐藏方式
|
||||||
|
默认是点击关闭菜单，可以关闭此功能。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### The way of hiding menu.
|
||||||
|
The default is to close the menu when you click on menu items, this feature can be turned off.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-dropdown v-model="visible">
|
||||||
|
<a class="ant-dropdown-link" href="#">
|
||||||
|
Hover me <a-icon type="down" />
|
||||||
|
</a>
|
||||||
|
<a-menu slot="overlay" @click="handleMenuClick">
|
||||||
|
<a-menu-item key="1">Clicking me will not close the menu.</a-menu-item>
|
||||||
|
<a-menu-item key="2">Clicking me will not close the menu also.</a-menu-item>
|
||||||
|
<a-menu-item key="3">Clicking me will close the menu</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleMenuClick (e) {
|
||||||
|
if (e.key === '3') {
|
||||||
|
this.visible = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<cn>
|
||||||
|
#### 弹出位置
|
||||||
|
支持 6 个弹出位置。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Placement
|
||||||
|
Support 6 placements.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div id="components-dropdown-demo-placement">
|
||||||
|
<template v-for="(placement, index) in placements">
|
||||||
|
<a-dropdown :placement="placement">
|
||||||
|
<a-button>{{placement}}</a-button>
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3rd menu item</a>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
<br v-if="index === 2"/>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
placements: ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
#components-dropdown-demo-placement .ant-btn {
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<cn>
|
||||||
|
#### 多级菜单
|
||||||
|
传入的菜单里有多个层级。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Cascading menu
|
||||||
|
The menu has multiple levels.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-dropdown>
|
||||||
|
<a class="ant-dropdown-link" href="#">
|
||||||
|
Cascading menu <a-icon type="down" />
|
||||||
|
</a>
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item>1st menu item</a-menu-item>
|
||||||
|
<a-menu-item>2nd menu item</a-menu-item>
|
||||||
|
<a-sub-menu title="sub menu" key="test">
|
||||||
|
<a-menu-item>3rd menu item</a-menu-item>
|
||||||
|
<a-menu-item>4th menu item</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
<a-sub-menu title="disabled sub menu" disabled>
|
||||||
|
<a-menu-item>5d menu item</a-menu-item>
|
||||||
|
<a-menu-item>6th menu item</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<cn>
|
||||||
|
#### 触发方式
|
||||||
|
默认是移入触发菜单，可以点击触发。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Trigger mode
|
||||||
|
The default trigger mode is `hover`, you can change it to `click`.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-dropdown :trigger="['click']">
|
||||||
|
<a class="ant-dropdown-link" href="#">
|
||||||
|
Click me <a-icon type="down" />
|
||||||
|
</a>
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item key="0">
|
||||||
|
<a href="http://www.alipay.com/">1st menu item</a>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item key="1">
|
||||||
|
<a href="http://www.taobao.com/">2nd menu item</a>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-divider />
|
||||||
|
<a-menu-item key="3">3rd menu item</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
<script>
|
||||||
|
import Button from '../button'
|
||||||
|
import { ButtonGroupProps } from '../button/button-group'
|
||||||
|
import Icon from '../icon'
|
||||||
|
import Dropdown from './dropdown'
|
||||||
|
import PropTypes from '../_util/vue-types'
|
||||||
|
import { hasProp, getComponentFromProp } from '../_util/props-util'
|
||||||
|
import getDropdownProps from './getDropdownProps'
|
||||||
|
const DropdownProps = getDropdownProps()
|
||||||
|
const ButtonGroup = Button.Group
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
...ButtonGroupProps,
|
||||||
|
...DropdownProps,
|
||||||
|
type: PropTypes.oneOf(['primary', 'ghost', 'dashed', 'default']).def('default'),
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
prefixCls: PropTypes.string.def('ant-dropdown-button'),
|
||||||
|
placement: DropdownProps.placement.def('bottomRight'),
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick (e) {
|
||||||
|
this.$emit('click', e)
|
||||||
|
},
|
||||||
|
onVisibleChange (val) {
|
||||||
|
this.$emit('visibleChange', val)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'visible',
|
||||||
|
event: 'visibleChange',
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
const {
|
||||||
|
type, disabled,
|
||||||
|
prefixCls, trigger, align,
|
||||||
|
visible, placement, getPopupContainer,
|
||||||
|
...restProps
|
||||||
|
} = this.$props
|
||||||
|
|
||||||
|
const dropdownProps = {
|
||||||
|
props: {
|
||||||
|
align,
|
||||||
|
disabled,
|
||||||
|
trigger: disabled ? [] : trigger,
|
||||||
|
placement,
|
||||||
|
getPopupContainer,
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
visibleChange: this.onVisibleChange,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
if (hasProp(this, 'visible')) {
|
||||||
|
dropdownProps.visible = visible
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ButtonGroup
|
||||||
|
{...restProps}
|
||||||
|
class={prefixCls}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type={type}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={this.onClick}
|
||||||
|
>
|
||||||
|
{this.$slots.default}
|
||||||
|
</Button>
|
||||||
|
<Dropdown {...dropdownProps}>
|
||||||
|
<template slot='overlay'>
|
||||||
|
{getComponentFromProp(this, 'overlay')}
|
||||||
|
</template>
|
||||||
|
<Button type={type}>
|
||||||
|
<Icon type='down' />
|
||||||
|
</Button>
|
||||||
|
</Dropdown>
|
||||||
|
</ButtonGroup>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
<script>
|
||||||
|
import RcDropdown from './src/dropdown'
|
||||||
|
import DropdownButton from './dropdown-button'
|
||||||
|
// import warning from '../_util/warning'
|
||||||
|
import PropTypes from '../_util/vue-types'
|
||||||
|
import { cloneElement, getPropsData } from '../_util/vnode'
|
||||||
|
import { getOptionProps } from '../_util/props-util'
|
||||||
|
import getDropdownProps from './getDropdownProps'
|
||||||
|
const DropdownProps = getDropdownProps()
|
||||||
|
const Dropdown = {
|
||||||
|
props: {
|
||||||
|
...DropdownProps,
|
||||||
|
prefixCls: PropTypes.string.def('ant-dropdown'),
|
||||||
|
mouseEnterDelay: PropTypes.number.def(0.15),
|
||||||
|
mouseLeaveDelay: PropTypes.number.def(0.1),
|
||||||
|
placement: DropdownProps.placement.def('bottomLeft'),
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'visible',
|
||||||
|
event: 'visibleChange',
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTransitionName () {
|
||||||
|
const { placement = '', transitionName } = this.$props
|
||||||
|
if (transitionName !== undefined) {
|
||||||
|
return transitionName
|
||||||
|
}
|
||||||
|
if (placement.indexOf('top') >= 0) {
|
||||||
|
return 'slide-down'
|
||||||
|
}
|
||||||
|
return 'slide-up'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { $slots, prefixCls, trigger, disabled, $listeners } = this
|
||||||
|
const dropdownTrigger = cloneElement($slots.default, {
|
||||||
|
class: `${prefixCls}-trigger`,
|
||||||
|
disabled,
|
||||||
|
})
|
||||||
|
const overlay = $slots.overlay && $slots.overlay[0]
|
||||||
|
// menu cannot be selectable in dropdown defaultly
|
||||||
|
const overlayProps = overlay && getPropsData(overlay)
|
||||||
|
const selectable = (overlayProps && 'selectable' in overlayProps)
|
||||||
|
? overlayProps.selectable : false
|
||||||
|
const fixedModeOverlay = cloneElement(overlay, {
|
||||||
|
props: {
|
||||||
|
mode: 'vertical',
|
||||||
|
selectable,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const dropdownProps = {
|
||||||
|
props: {
|
||||||
|
...getOptionProps(this),
|
||||||
|
transitionName: this.getTransitionName(),
|
||||||
|
trigger: disabled ? [] : trigger,
|
||||||
|
},
|
||||||
|
on: $listeners,
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<RcDropdown
|
||||||
|
{...dropdownProps}
|
||||||
|
>
|
||||||
|
{dropdownTrigger}
|
||||||
|
<template slot='overlay'>
|
||||||
|
{fixedModeOverlay}
|
||||||
|
</template>
|
||||||
|
</RcDropdown>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
Dropdown.Button = DropdownButton
|
||||||
|
export default Dropdown
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import PropTypes from '../_util/vue-types'
|
||||||
|
export default () => ({
|
||||||
|
trigger: PropTypes.array.def(['hover']),
|
||||||
|
overlay: PropTypes.any,
|
||||||
|
visible: PropTypes.bool,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
align: PropTypes.object,
|
||||||
|
getPopupContainer: PropTypes.func,
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
transitionName: PropTypes.string,
|
||||||
|
placement: PropTypes.oneOf(['topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight']),
|
||||||
|
forceRender: PropTypes.bool,
|
||||||
|
})
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
## API
|
||||||
|
|
||||||
|
### Dropdown
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| disabled | whether the dropdown menu is disabled | boolean | - |
|
||||||
|
| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` |
|
||||||
|
| overlay(slot) | the dropdown menu | [Menu](#/components/us/menu) | - |
|
||||||
|
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||||
|
| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
|
||||||
|
| visible(v-model) | whether the dropdown menu is visible | boolean | - |
|
||||||
|
|
||||||
|
### events
|
||||||
|
| Events Name | Description | Arguments |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | function(visible) |
|
||||||
|
|
||||||
|
You should use [Menu](#/components/us/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
|
||||||
|
|
||||||
|
> Warning: You must set a unique `key` for `Menu.Item`.
|
||||||
|
>
|
||||||
|
> Menu of Dropdown is unselectable by default, you can make it selectable via `<Menu selectable>`.
|
||||||
|
|
||||||
|
### Dropdown.Button
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| disabled | whether the dropdown menu is disabled | boolean | - |
|
||||||
|
| overlay(slot) | the dropdown menu | [Menu](#/components/us/menu) | - |
|
||||||
|
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||||
|
| size | size of the button, the same as [Button](#/components/us/button) | string | `default` |
|
||||||
|
| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
|
||||||
|
| type | type of the button, the same as [Button](#/components/us/button) | string | `default` |
|
||||||
|
| visible | whether the dropdown menu is visible | boolean | - |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Dropdown.Button events
|
||||||
|
| Events Name | Description | Arguments |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| click | a callback function, the same as [Button](#/components/us/button), which will be executed when you click the button on the left | Function |
|
||||||
|
| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function |
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import Dropdown from './dropdown'
|
||||||
|
import DropdownButton from './dropdown-button'
|
||||||
|
|
||||||
|
export { DropDownProps } from './dropdown'
|
||||||
|
export { DropdownButtonProps } from './dropdown-button'
|
||||||
|
|
||||||
|
Dropdown.Button = DropdownButton
|
||||||
|
export default Dropdown
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
## API
|
||||||
|
|
||||||
|
属性如下
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| disabled | 菜单是否禁用 | boolean | - |
|
||||||
|
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | `() => document.body` |
|
||||||
|
| overlay(slot) | 菜单 | [Menu](#/components/cn/menu) | - |
|
||||||
|
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||||
|
| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
|
||||||
|
| visible(v-model) | 菜单是否显示 | boolean | - |
|
||||||
|
|
||||||
|
`overlay` 菜单使用 [Menu](#/components/cn/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
|
||||||
|
|
||||||
|
> 注意： Menu.Item 必须设置唯一的 key 属性。
|
||||||
|
>
|
||||||
|
> Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 `<Menu selectable>`.
|
||||||
|
|
||||||
|
### 事件
|
||||||
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| visibleChange | 菜单显示状态改变时调用，参数为 visible | function(visible) |
|
||||||
|
|
||||||
|
|
||||||
|
### Dropdown.Button
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| disabled | 菜单是否禁用 | boolean | - |
|
||||||
|
| overlay(slot) | 菜单 | [Menu](#/components/cn/menu/) | - |
|
||||||
|
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||||
|
| size | 按钮大小，和 [Button](#/components/cn/button/) 一致 | string | 'default' |
|
||||||
|
| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
|
||||||
|
| type | 按钮类型，和 [Button](#/components/cn/button/) 一致 | string | 'default' |
|
||||||
|
| visible(v-model) | 菜单是否显示 | boolean | - |
|
||||||
|
|
||||||
|
### Dropdown.Button事件
|
||||||
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| click | 点击左侧按钮的回调，和 [Button](#/components/cn/button/) 一致 | Function |
|
||||||
|
| visibleChange | 菜单显示状态改变时调用，参数为 visible | function(visible) |
|
||||||
@ -0,0 +1,157 @@
|
|||||||
|
<script>
|
||||||
|
import PropTypes from '../../_util/vue-types'
|
||||||
|
import Trigger from '../../trigger'
|
||||||
|
import placements from './placements'
|
||||||
|
import { hasProp } from '../../_util/props-util'
|
||||||
|
import BaseMixin from '../../_util/BaseMixin'
|
||||||
|
import { cloneElement, getEvents } from '../../_util/vnode'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [BaseMixin],
|
||||||
|
props: {
|
||||||
|
minOverlayWidthMatchTrigger: PropTypes.bool.def(true),
|
||||||
|
prefixCls: PropTypes.string.def('rc-dropdown'),
|
||||||
|
transitionName: PropTypes.string,
|
||||||
|
overlayClassName: PropTypes.string.def(''),
|
||||||
|
animation: PropTypes.any,
|
||||||
|
align: PropTypes.object,
|
||||||
|
overlayStyle: PropTypes.object.def({}),
|
||||||
|
placement: PropTypes.string.def('bottomLeft'),
|
||||||
|
trigger: PropTypes.array.def(['hover']),
|
||||||
|
showAction: PropTypes.array.def([]),
|
||||||
|
hideAction: PropTypes.array.def([]),
|
||||||
|
getPopupContainer: PropTypes.func,
|
||||||
|
visible: PropTypes.bool,
|
||||||
|
defaultVisible: PropTypes.bool.def(false),
|
||||||
|
mouseEnterDelay: PropTypes.number.def(0.15),
|
||||||
|
mouseLeaveDelay: PropTypes.number.def(0.1),
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
let sVisible = this.defaultVisible
|
||||||
|
if (hasProp(this, 'visible')) {
|
||||||
|
sVisible = this.visible
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
sVisible,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
visible (val) {
|
||||||
|
if (val !== undefined) {
|
||||||
|
this.setState({
|
||||||
|
sVisible: val,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick (e) {
|
||||||
|
// do no call onVisibleChange, if you need click to hide, use onClick and control visible
|
||||||
|
if (!hasProp(this, 'visible')) {
|
||||||
|
this.setState({
|
||||||
|
sVisible: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.$emit('overlayClick', e)
|
||||||
|
if (this.childOriginEvents.click) {
|
||||||
|
this.childOriginEvents.click(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onVisibleChange (visible) {
|
||||||
|
if (!hasProp(this, 'visible')) {
|
||||||
|
this.setState({
|
||||||
|
sVisible: visible,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.__emit('visibleChange', visible)
|
||||||
|
},
|
||||||
|
|
||||||
|
getMenuElement () {
|
||||||
|
const child = this.$slots.overlay[0]
|
||||||
|
const events = getEvents(child)
|
||||||
|
if (!events._ANT_DROPDOWN_EVENT_HACK) {
|
||||||
|
this.childOriginEvents = events
|
||||||
|
}
|
||||||
|
const { prefixCls } = this.$props
|
||||||
|
const extraOverlayProps = {
|
||||||
|
prefixCls: `${prefixCls}-menu`,
|
||||||
|
}
|
||||||
|
const overlay = this.$slots.overlay[0]
|
||||||
|
return cloneElement(overlay, {
|
||||||
|
props: extraOverlayProps,
|
||||||
|
on: {
|
||||||
|
click: this.onClick,
|
||||||
|
_ANT_DROPDOWN_EVENT_HACK: () => {},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getPopupDomNode () {
|
||||||
|
return this.$refs.trigger.getPopupDomNode()
|
||||||
|
},
|
||||||
|
|
||||||
|
afterVisibleChange (visible) {
|
||||||
|
if (visible && this.$props.minOverlayWidthMatchTrigger) {
|
||||||
|
const overlayNode = this.getPopupDomNode()
|
||||||
|
const rootNode = this.$el
|
||||||
|
if (rootNode && overlayNode && rootNode.offsetWidth > overlayNode.offsetWidth) {
|
||||||
|
overlayNode.style.width = `${rootNode.offsetWidth}px`
|
||||||
|
if (this.$refs.trigger &&
|
||||||
|
this.$refs.trigger._component &&
|
||||||
|
this.$refs.trigger._component.alignInstance) {
|
||||||
|
this.$refs.trigger._component.alignInstance.forceAlign()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const {
|
||||||
|
prefixCls,
|
||||||
|
transitionName, animation,
|
||||||
|
align, placement, getPopupContainer,
|
||||||
|
showAction, hideAction,
|
||||||
|
overlayClassName, overlayStyle,
|
||||||
|
trigger, ...otherProps
|
||||||
|
} = this.$props
|
||||||
|
|
||||||
|
const triggerProps = {
|
||||||
|
props: {
|
||||||
|
...otherProps,
|
||||||
|
prefixCls,
|
||||||
|
popupClassName: overlayClassName,
|
||||||
|
popupStyle: overlayStyle,
|
||||||
|
builtinPlacements: placements,
|
||||||
|
action: trigger,
|
||||||
|
showAction,
|
||||||
|
hideAction,
|
||||||
|
popupPlacement: placement,
|
||||||
|
popupAlign: align,
|
||||||
|
popupTransitionName: transitionName,
|
||||||
|
popupAnimation: animation,
|
||||||
|
popupVisible: this.sVisible,
|
||||||
|
afterPopupVisibleChange: this.afterVisibleChange,
|
||||||
|
getPopupContainer: getPopupContainer,
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
popupVisibleChange: this.onVisibleChange,
|
||||||
|
},
|
||||||
|
ref: 'trigger',
|
||||||
|
}
|
||||||
|
const child = this.$slots.default && this.$slots.default[0]
|
||||||
|
return (
|
||||||
|
<Trigger {...triggerProps}>
|
||||||
|
{child && !child.tag
|
||||||
|
? <span>{child}</span>
|
||||||
|
: child}
|
||||||
|
<template slot='popup'>
|
||||||
|
{this.$slots.overlay && this.getMenuElement()}
|
||||||
|
</template>
|
||||||
|
</Trigger>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
import Dropdown from './Dropdown'
|
||||||
|
export default Dropdown
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
const autoAdjustOverflow = {
|
||||||
|
adjustX: 1,
|
||||||
|
adjustY: 1,
|
||||||
|
}
|
||||||
|
|
||||||
|
const targetOffset = [0, 0]
|
||||||
|
|
||||||
|
export const placements = {
|
||||||
|
topLeft: {
|
||||||
|
points: ['bl', 'tl'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, -4],
|
||||||
|
targetOffset,
|
||||||
|
},
|
||||||
|
topCenter: {
|
||||||
|
points: ['bc', 'tc'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, -4],
|
||||||
|
targetOffset,
|
||||||
|
},
|
||||||
|
topRight: {
|
||||||
|
points: ['br', 'tr'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, -4],
|
||||||
|
targetOffset,
|
||||||
|
},
|
||||||
|
bottomLeft: {
|
||||||
|
points: ['tl', 'bl'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, 4],
|
||||||
|
targetOffset,
|
||||||
|
},
|
||||||
|
bottomCenter: {
|
||||||
|
points: ['tc', 'bc'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, 4],
|
||||||
|
targetOffset,
|
||||||
|
},
|
||||||
|
bottomRight: {
|
||||||
|
points: ['tr', 'br'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, 4],
|
||||||
|
targetOffset,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default placements
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import '../../style/index.less'
|
||||||
|
import './index.less'
|
||||||
|
|
||||||
|
// style dependencies
|
||||||
|
import '../../button/style'
|
||||||
@ -0,0 +1,250 @@
|
|||||||
|
@import "../../style/themes/default";
|
||||||
|
@import "../../style/mixins/index";
|
||||||
|
|
||||||
|
@dropdown-prefix-cls: ~"@{ant-prefix}-dropdown";
|
||||||
|
|
||||||
|
.@{dropdown-prefix-cls} {
|
||||||
|
.reset-component;
|
||||||
|
position: absolute;
|
||||||
|
left: -9999px;
|
||||||
|
top: -9999px;
|
||||||
|
z-index: @zindex-dropdown;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&-wrap {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
|
||||||
|
.iconfont-size-under-12px(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{iconfont-css-prefix}-down:before {
|
||||||
|
transition: transform .2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-wrap-open {
|
||||||
|
.@{iconfont-css-prefix}-down:before {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-hidden,
|
||||||
|
&-menu-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-menu {
|
||||||
|
outline: none;
|
||||||
|
position: relative;
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-align: left;
|
||||||
|
background-color: @component-background;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
box-shadow: @box-shadow-base;
|
||||||
|
background-clip: padding-box;
|
||||||
|
|
||||||
|
&-item-group-title {
|
||||||
|
color: @text-color-secondary;
|
||||||
|
padding: 5px @control-padding-horizontal;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-submenu-popup {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item,
|
||||||
|
&-submenu-title {
|
||||||
|
padding: 5px @control-padding-horizontal;
|
||||||
|
margin: 0;
|
||||||
|
clear: both;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
font-weight: normal;
|
||||||
|
color: @text-color;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all .3s;
|
||||||
|
line-height: 22px;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
color: @text-color;
|
||||||
|
display: block;
|
||||||
|
padding: 5px @control-padding-horizontal;
|
||||||
|
margin: -5px -@control-padding-horizontal;
|
||||||
|
transition: all .3s;
|
||||||
|
&:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-selected,
|
||||||
|
&-selected > a {
|
||||||
|
color: @primary-color;
|
||||||
|
background-color: @item-active-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: @item-hover-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-disabled {
|
||||||
|
color: @disabled-color;
|
||||||
|
cursor: not-allowed;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @disabled-color;
|
||||||
|
background-color: @component-background;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child,
|
||||||
|
&:first-child > a {
|
||||||
|
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child,
|
||||||
|
&:last-child > a {
|
||||||
|
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:only-child,
|
||||||
|
&:only-child > a {
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-divider {
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: @border-color-split;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
.@{dropdown-prefix-cls}-menu-submenu-arrow {
|
||||||
|
position: absolute;
|
||||||
|
right: @padding-xs;
|
||||||
|
&:after {
|
||||||
|
font-family: "anticon" !important;
|
||||||
|
font-style: normal;
|
||||||
|
content: "\e61f";
|
||||||
|
color: @text-color-secondary;
|
||||||
|
.iconfont-size-under-12px(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-submenu-title {
|
||||||
|
padding-right: 26px;
|
||||||
|
&:first-child,
|
||||||
|
&:last-child {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-submenu-vertical {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-submenu-vertical > & {
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
position: absolute;
|
||||||
|
min-width: 100%;
|
||||||
|
margin-left: 4px;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
|
||||||
|
&,
|
||||||
|
.@{dropdown-prefix-cls}-menu-submenu-arrow:after {
|
||||||
|
color: @disabled-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-submenu:first-child &-submenu-title {
|
||||||
|
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-submenu:last-child &-submenu-title {
|
||||||
|
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slide-down-enter.slide-down-enter-active&-placement-bottomLeft,
|
||||||
|
&.slide-down-appear.slide-down-appear-active&-placement-bottomLeft,
|
||||||
|
&.slide-down-enter.slide-down-enter-active&-placement-bottomCenter,
|
||||||
|
&.slide-down-appear.slide-down-appear-active&-placement-bottomCenter,
|
||||||
|
&.slide-down-enter.slide-down-enter-active&-placement-bottomRight,
|
||||||
|
&.slide-down-appear.slide-down-appear-active&-placement-bottomRight {
|
||||||
|
animation-name: antSlideUpIn;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,
|
||||||
|
&.slide-up-appear.slide-up-appear-active&-placement-topLeft,
|
||||||
|
&.slide-up-enter.slide-up-enter-active&-placement-topCenter,
|
||||||
|
&.slide-up-appear.slide-up-appear-active&-placement-topCenter,
|
||||||
|
&.slide-up-enter.slide-up-enter-active&-placement-topRight,
|
||||||
|
&.slide-up-appear.slide-up-appear-active&-placement-topRight {
|
||||||
|
animation-name: antSlideDownIn;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slide-down-leave.slide-down-leave-active&-placement-bottomLeft,
|
||||||
|
&.slide-down-leave.slide-down-leave-active&-placement-bottomCenter,
|
||||||
|
&.slide-down-leave.slide-down-leave-active&-placement-bottomRight {
|
||||||
|
animation-name: antSlideUpOut;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slide-up-leave.slide-up-leave-active&-placement-topLeft,
|
||||||
|
&.slide-up-leave.slide-up-leave-active&-placement-topCenter,
|
||||||
|
&.slide-up-leave.slide-up-leave-active&-placement-topRight {
|
||||||
|
animation-name: antSlideDownOut;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{dropdown-prefix-cls}-trigger,
|
||||||
|
.@{dropdown-prefix-cls}-link {
|
||||||
|
.@{iconfont-css-prefix}-down {
|
||||||
|
.iconfont-size-under-12px(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{dropdown-prefix-cls}-button {
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
|
||||||
|
padding-left: @padding-xs;
|
||||||
|
padding-right: @padding-xs;
|
||||||
|
}
|
||||||
|
.@{iconfont-css-prefix}-down {
|
||||||
|
.iconfont-size-under-12px(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://github.com/ant-design/ant-design/issues/4903
|
||||||
|
.@{dropdown-prefix-cls}-menu-dark {
|
||||||
|
&,
|
||||||
|
.@{dropdown-prefix-cls}-menu {
|
||||||
|
background: @menu-dark-bg;
|
||||||
|
}
|
||||||
|
.@{dropdown-prefix-cls}-menu-item,
|
||||||
|
.@{dropdown-prefix-cls}-menu-submenu-title,
|
||||||
|
.@{dropdown-prefix-cls}-menu-item > a {
|
||||||
|
color: @text-color-secondary-dark;
|
||||||
|
.@{dropdown-prefix-cls}-menu-submenu-arrow:after {
|
||||||
|
color: @text-color-secondary-dark;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.@{dropdown-prefix-cls}-menu-item-selected {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
> a {
|
||||||
|
background: @primary-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue