ant-design-vue/components/dropdown/dropdown-button.jsx

103 lines
2.8 KiB
Vue
Raw Normal View History

2019-01-12 11:33:27 +08:00
import Button from '../button';
import buttonTypes from '../button/buttonTypes';
import { ButtonGroupProps } from '../button/button-group';
import Dropdown from './dropdown';
import PropTypes from '../_util/vue-types';
import { hasProp, getComponentFromProp } from '../_util/props-util';
import getDropdownProps from './getDropdownProps';
2019-04-10 10:09:00 +08:00
import { ConfigConsumerProps } from '../config-provider';
2019-01-12 11:33:27 +08:00
const ButtonTypesProps = buttonTypes();
const DropdownProps = getDropdownProps();
const ButtonGroup = Button.Group;
2018-01-31 10:30:09 +08:00
const DropdownButtonProps = {
...ButtonGroupProps,
...DropdownProps,
type: PropTypes.oneOf(['primary', 'ghost', 'dashed', 'danger', 'default']).def('default'),
size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
2018-12-15 15:22:33 +08:00
htmlType: ButtonTypesProps.htmlType,
2019-04-10 10:09:00 +08:00
href: PropTypes.string,
2018-01-31 10:30:09 +08:00
disabled: PropTypes.bool,
2019-04-10 10:09:00 +08:00
prefixCls: PropTypes.string,
2018-01-31 10:30:09 +08:00
placement: DropdownProps.placement.def('bottomRight'),
2019-01-12 11:33:27 +08:00
};
export { DropdownButtonProps };
2018-01-29 18:57:20 +08:00
export default {
2018-04-08 21:17:20 +08:00
name: 'ADropdownButton',
2019-02-01 17:23:00 +08:00
model: {
prop: 'visible',
event: 'visibleChange',
},
2018-01-31 10:30:09 +08:00
props: DropdownButtonProps,
2019-07-04 18:12:52 +08:00
provide() {
return {
savePopupRef: this.savePopupRef,
};
},
inject: {
configProvider: { default: () => ({}) },
},
2018-01-29 18:57:20 +08:00
methods: {
2019-07-04 18:12:52 +08:00
savePopupRef(ref) {
this.popupRef = ref;
},
2019-01-12 11:33:27 +08:00
onClick(e) {
this.$emit('click', e);
2018-01-29 18:57:20 +08:00
},
2019-01-12 11:33:27 +08:00
onVisibleChange(val) {
this.$emit('visibleChange', val);
2018-01-29 18:57:20 +08:00
},
},
2019-01-12 11:33:27 +08:00
render() {
2018-01-29 18:57:20 +08:00
const {
2019-01-12 11:33:27 +08:00
type,
disabled,
htmlType,
2019-04-10 10:09:00 +08:00
prefixCls: customizePrefixCls,
2019-01-12 11:33:27 +08:00
trigger,
align,
visible,
placement,
getPopupContainer,
2019-04-10 10:09:00 +08:00
href,
2018-01-29 18:57:20 +08:00
...restProps
2019-01-12 11:33:27 +08:00
} = this.$props;
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
2019-04-10 10:09:00 +08:00
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
2018-01-29 18:57:20 +08:00
const dropdownProps = {
props: {
align,
disabled,
trigger: disabled ? [] : trigger,
placement,
getPopupContainer: getPopupContainer || getContextPopupContainer,
2018-01-29 18:57:20 +08:00
},
on: {
visibleChange: this.onVisibleChange,
},
2019-01-12 11:33:27 +08:00
};
2018-01-29 18:57:20 +08:00
if (hasProp(this, 'visible')) {
2019-01-12 11:33:27 +08:00
dropdownProps.props.visible = visible;
2018-01-29 18:57:20 +08:00
}
const buttonGroupProps = {
props: {
...restProps,
},
class: prefixCls,
};
2018-01-29 18:57:20 +08:00
return (
<ButtonGroup {...buttonGroupProps}>
2019-01-12 11:33:27 +08:00
<Button type={type} disabled={disabled} onClick={this.onClick} htmlType={htmlType}>
2018-01-29 18:57:20 +08:00
{this.$slots.default}
</Button>
<Dropdown {...dropdownProps}>
2019-01-12 11:33:27 +08:00
<template slot="overlay">{getComponentFromProp(this, 'overlay')}</template>
<Button type={type} disabled={disabled} icon="ellipsis" />
2018-01-29 18:57:20 +08:00
</Dropdown>
</ButtonGroup>
2019-01-12 11:33:27 +08:00
);
2018-01-29 18:57:20 +08:00
},
2019-01-12 11:33:27 +08:00
};