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

84 lines
2.0 KiB
Vue
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-01-29 10:57:20 +00:00
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
2018-01-31 02:30:09 +00:00
const DropdownButtonProps = {
...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'),
}
export { DropdownButtonProps }
2018-01-29 10:57:20 +00:00
export default {
2018-04-08 13:17:20 +00:00
name: 'ADropdownButton',
2018-01-31 02:30:09 +00:00
props: DropdownButtonProps,
2018-01-29 10:57:20 +00:00
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')) {
2018-02-03 14:06:18 +00:00
dropdownProps.props.visible = visible
2018-01-29 10:57:20 +00:00
}
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>
)
},
}