feat: dropdown add overlayClassName overlayStyle,
tangjinzhou
parent
9252b652c9
commit
8eaf6da73a
|
|
@ -14,7 +14,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
|
|||
<div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
|
||||
</svg></i></button></div>
|
||||
<div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button type="button" disabled="disabled" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
|
||||
</svg></i></button></div> <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger" style="margin-left: 8px;">
|
||||
Button <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { mount } from '@vue/test-utils'
|
||||
import Dropdown from '..'
|
||||
import Menu from '../../menu'
|
||||
|
||||
describe('DropdownButton', () => {
|
||||
it('pass appropriate props to Dropdown', () => {
|
||||
|
|
@ -26,7 +27,17 @@ describe('DropdownButton', () => {
|
|||
})
|
||||
|
||||
it('don\'t pass visible to Dropdown if it\'s not exits', () => {
|
||||
const wrapper = mount(Dropdown.Button)
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Dropdown.Button
|
||||
overlay={<Menu>
|
||||
<Menu.Item>foo</Menu.Item>
|
||||
</Menu>}
|
||||
/>
|
||||
)
|
||||
},
|
||||
})
|
||||
const dropdownProps = wrapper.find({ name: 'ADropdown' }).props()
|
||||
|
||||
expect('visible' in dropdownProps).toBe(false)
|
||||
|
|
|
|||
|
|
@ -34,6 +34,9 @@ export default {
|
|||
prop: 'visible',
|
||||
event: 'visibleChange',
|
||||
},
|
||||
inject: {
|
||||
configProvider: { default: {}},
|
||||
},
|
||||
render () {
|
||||
const {
|
||||
type, disabled, htmlType,
|
||||
|
|
@ -41,14 +44,14 @@ export default {
|
|||
visible, placement, getPopupContainer,
|
||||
...restProps
|
||||
} = this.$props
|
||||
|
||||
const { getPopupContainer: getContextPopupContainer } = this.configProvider
|
||||
const dropdownProps = {
|
||||
props: {
|
||||
align,
|
||||
disabled,
|
||||
trigger: disabled ? [] : trigger,
|
||||
placement,
|
||||
getPopupContainer,
|
||||
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
||||
},
|
||||
on: {
|
||||
visibleChange: this.onVisibleChange,
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@ const Dropdown = {
|
|||
prop: 'visible',
|
||||
event: 'visibleChange',
|
||||
},
|
||||
inject: {
|
||||
configProvider: { default: {}},
|
||||
},
|
||||
methods: {
|
||||
getTransitionName () {
|
||||
const { placement = '', transitionName } = this.$props
|
||||
|
|
@ -35,7 +38,15 @@ const Dropdown = {
|
|||
},
|
||||
|
||||
render () {
|
||||
const { $slots, prefixCls, trigger, disabled, $listeners } = this
|
||||
const { $slots, $listeners } = this
|
||||
const props = getOptionProps(this)
|
||||
const {
|
||||
prefixCls,
|
||||
trigger,
|
||||
disabled,
|
||||
getPopupContainer,
|
||||
} = props
|
||||
const { getPopupContainer: getContextPopupContainer } = this.configProvider
|
||||
const dropdownTrigger = cloneElement($slots.default, {
|
||||
class: `${prefixCls}-trigger`,
|
||||
disabled,
|
||||
|
|
@ -68,7 +79,8 @@ const Dropdown = {
|
|||
const dropdownProps = {
|
||||
props: {
|
||||
alignPoint,
|
||||
...getOptionProps(this),
|
||||
...props,
|
||||
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
||||
transitionName: this.getTransitionName(),
|
||||
trigger: triggerActions,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,5 +9,9 @@ export default () => ({
|
|||
prefixCls: PropTypes.string,
|
||||
transitionName: PropTypes.string,
|
||||
placement: PropTypes.oneOf(['topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight']),
|
||||
overlayClassName: PropTypes.string,
|
||||
overlayStyle: PropTypes.object,
|
||||
forceRender: PropTypes.bool,
|
||||
mouseEnterDelay: PropTypes.number,
|
||||
mouseLeaveDelay: PropTypes.number,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
| 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](/ant-design-vue/components/menu) | - |
|
||||
| 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']` |
|
||||
| visible(v-model) | whether the dropdown menu is visible | boolean | - |
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
| disabled | 菜单是否禁用 | boolean | - |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | `() => document.body` |
|
||||
| overlay(slot) | 菜单 | [Menu](/ant-design-vue/components/menu-cn) | - |
|
||||
| overlayClassName | 下拉根元素的类名称 | string | - |
|
||||
| overlayStyle | 下拉根元素的样式 | object | - |
|
||||
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||
| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
|
||||
| visible(v-model) | 菜单是否显示 | boolean | - |
|
||||
|
|
|
|||
Loading…
Reference in New Issue