update dropdown
parent
b22dfe297b
commit
05907aaff9
|
@ -44,4 +44,22 @@ describe('DropdownButton', () => {
|
|||
|
||||
expect('visible' in dropdownProps).toBe(false);
|
||||
});
|
||||
|
||||
it('should support href like Button', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<Dropdown.Button
|
||||
href="https://ant.design"
|
||||
overlay={
|
||||
<Menu>
|
||||
<Menu.Item>foo</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -5,6 +5,7 @@ import Dropdown from './dropdown';
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import { hasProp, getComponentFromProp } from '../_util/props-util';
|
||||
import getDropdownProps from './getDropdownProps';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
const ButtonTypesProps = buttonTypes();
|
||||
const DropdownProps = getDropdownProps();
|
||||
const ButtonGroup = Button.Group;
|
||||
|
@ -13,8 +14,9 @@ const DropdownButtonProps = {
|
|||
...DropdownProps,
|
||||
type: PropTypes.oneOf(['primary', 'ghost', 'dashed', 'danger', 'default']).def('default'),
|
||||
htmlType: ButtonTypesProps.htmlType,
|
||||
href: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
prefixCls: PropTypes.string.def('ant-dropdown-button'),
|
||||
prefixCls: PropTypes.string,
|
||||
placement: DropdownProps.placement.def('bottomRight'),
|
||||
};
|
||||
export { DropdownButtonProps };
|
||||
|
@ -41,15 +43,18 @@ export default {
|
|||
type,
|
||||
disabled,
|
||||
htmlType,
|
||||
prefixCls,
|
||||
prefixCls: customizePrefixCls,
|
||||
trigger,
|
||||
align,
|
||||
visible,
|
||||
placement,
|
||||
getPopupContainer,
|
||||
href,
|
||||
...restProps
|
||||
} = this.$props;
|
||||
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
|
||||
const dropdownProps = {
|
||||
props: {
|
||||
align,
|
||||
|
@ -68,7 +73,7 @@ export default {
|
|||
|
||||
return (
|
||||
<ButtonGroup {...restProps} class={prefixCls}>
|
||||
<Button type={type} disabled={disabled} onClick={this.onClick} htmlType={htmlType}>
|
||||
<Button type={type} disabled={disabled} onClick={this.onClick} htmlType={htmlType} href={href}>
|
||||
{this.$slots.default}
|
||||
</Button>
|
||||
<Dropdown {...dropdownProps}>
|
||||
|
|
|
@ -4,6 +4,7 @@ import PropTypes from '../_util/vue-types';
|
|||
import { cloneElement } from '../_util/vnode';
|
||||
import { getOptionProps, getPropsData } from '../_util/props-util';
|
||||
import getDropdownProps from './getDropdownProps';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import Icon from '../icon';
|
||||
|
||||
const DropdownProps = getDropdownProps();
|
||||
|
@ -34,40 +35,46 @@ const Dropdown = {
|
|||
}
|
||||
return 'slide-up';
|
||||
},
|
||||
renderOverlay(prefixCls) {
|
||||
const { $slots } = this;
|
||||
const overlay = this.overlay || ($slots.overlay && $slots.overlay[0]);
|
||||
// menu cannot be selectable in dropdown defaultly
|
||||
// menu should be focusable in dropdown defaultly
|
||||
const overlayProps = overlay && getPropsData(overlay);
|
||||
const { selectable = false, focusable = true } = overlayProps || {};
|
||||
const expandIcon = (
|
||||
<span class={`${prefixCls}-menu-submenu-arrow`}>
|
||||
<Icon type="right" class={`${prefixCls}-menu-submenu-arrow-icon`} />
|
||||
</span>
|
||||
);
|
||||
|
||||
const fixedModeOverlay =
|
||||
overlay && overlay.componentOptions
|
||||
? cloneElement(overlay, {
|
||||
props: {
|
||||
mode: 'vertical',
|
||||
selectable,
|
||||
focusable,
|
||||
expandIcon,
|
||||
},
|
||||
})
|
||||
: overlay;
|
||||
return fixedModeOverlay;
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { $slots, $listeners } = this;
|
||||
const props = getOptionProps(this);
|
||||
const { prefixCls, trigger, disabled, getPopupContainer } = props;
|
||||
const { prefixCls: customizePrefixCls, trigger, disabled, getPopupContainer } = props;
|
||||
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
|
||||
|
||||
const dropdownTrigger = cloneElement($slots.default, {
|
||||
class: `${prefixCls}-trigger`,
|
||||
disabled,
|
||||
});
|
||||
const overlay = this.overlay || ($slots.overlay && $slots.overlay[0]);
|
||||
// menu cannot be selectable in dropdown defaultly
|
||||
// menu should be focusable in dropdown defaultly
|
||||
const overlayProps = overlay && getPropsData(overlay);
|
||||
const { selectable = false, focusable = true } = overlayProps || {};
|
||||
|
||||
const expandIcon = (
|
||||
<span class={`${prefixCls}-menu-submenu-arrow`}>
|
||||
<Icon type="right" class={`${prefixCls}-menu-submenu-arrow-icon`} />
|
||||
</span>
|
||||
);
|
||||
|
||||
const fixedModeOverlay =
|
||||
overlay && overlay.componentOptions
|
||||
? cloneElement(overlay, {
|
||||
props: {
|
||||
mode: 'vertical',
|
||||
selectable,
|
||||
focusable,
|
||||
expandIcon,
|
||||
},
|
||||
})
|
||||
: overlay;
|
||||
const triggerActions = disabled ? [] : trigger;
|
||||
let alignPoint;
|
||||
if (triggerActions && triggerActions.indexOf('contextmenu') !== -1) {
|
||||
|
@ -77,6 +84,7 @@ const Dropdown = {
|
|||
props: {
|
||||
alignPoint,
|
||||
...props,
|
||||
prefixCls,
|
||||
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
||||
transitionName: this.getTransitionName(),
|
||||
trigger: triggerActions,
|
||||
|
@ -86,7 +94,7 @@ const Dropdown = {
|
|||
return (
|
||||
<RcDropdown {...dropdownProps}>
|
||||
{dropdownTrigger}
|
||||
<template slot="overlay">{fixedModeOverlay}</template>
|
||||
<template slot="overlay">{this.renderOverlay(prefixCls)}</template>
|
||||
</RcDropdown>
|
||||
);
|
||||
},
|
||||
|
|
|
@ -21,4 +21,5 @@ export default () => ({
|
|||
forceRender: PropTypes.bool,
|
||||
mouseEnterDelay: PropTypes.number,
|
||||
mouseLeaveDelay: PropTypes.number,
|
||||
openClassName: PropTypes.string,
|
||||
});
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
| overlayClassName | Class name of the dropdown root element | string | - |
|
||||
| overlayStyle | Style of the dropdown root element | object | - |
|
||||
| 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']` |
|
||||
| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
|
||||
| visible(v-model) | whether the dropdown menu is visible | boolean | - |
|
||||
|
||||
### events
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
| overlayClassName | 下拉根元素的类名称 | string | - |
|
||||
| overlayStyle | 下拉根元素的样式 | object | - |
|
||||
| placement | 菜单弹出位置:`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||
| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
|
||||
| trigger | 触发下拉的行为, 移动端不支持 hover | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
|
||||
| visible(v-model) | 菜单是否显示 | boolean | - |
|
||||
|
||||
`overlay` 菜单使用 [Menu](/components/menu-cn/),还包括菜单项 `Menu.Item`,分割线 `Menu.Divider`。
|
||||
|
|
Loading…
Reference in New Issue