pull/9/head
tangjinzhou 2018-01-18 18:58:36 +08:00
parent d9c893edb5
commit aebed8b169
5 changed files with 46 additions and 32 deletions

View File

@ -6,12 +6,13 @@ export default {
childProps: PropTypes.object.def({}),
},
render () {
const { $attrs, $listeners, childProps } = this
let children = this.$slots.default[0]
const { $attrs, $listeners, childProps, $slots } = this
let children = $slots.default[0]
children = cloneElement(children, {
attr: $attrs,
on: $listeners,
props: childProps,
addChildren: $slots.addChildren,
})
return children
},

View File

@ -1,6 +1,11 @@
import cloneDeep from 'lodash.clonedeep'
export function cloneVNode (vnode, deep) {
const componentOptions = vnode.componentOptions
// if (componentOptions && componentOptions.listeners) {
// componentOptions.listeners = cloneDeep(componentOptions.listeners)
// }
// const data = vnode.data ? cloneDeep(vnode.data) : vnode.data
const cloned = new vnode.constructor(
vnode.tag,
vnode.data,
@ -54,9 +59,10 @@ export function cloneElement (n, nodeProps, clone) {
node.componentOptions.listeners = node.componentOptions.listeners || {}
node.componentOptions.propsData = { ...node.componentOptions.propsData, ...props }
node.componentOptions.listeners = { ...node.componentOptions.listeners, ...on }
addChildren && node.componentOptions.children.push(addChildren)
node.componentOptions.children = node.componentOptions.children.filter(c => c.key !== '_ANT_PORTAL')
addChildren && node.componentOptions.children.push(...addChildren)
} else {
addChildren && (node.children = [...(node.children || []), addChildren])
addChildren && (node.children = [...(node.children || []), ...addChildren])
node.data.on = { ...(node.data.on || {}), ...on }
}
@ -96,5 +102,5 @@ export function getEvents (child) {
} else if (child.data && child.data.on) {
events = child.data.on
}
return { ...events }
return events
}

View File

@ -21,14 +21,13 @@ export default {
const itemProps = {
props,
attrs,
on: { ...$listeners },
on: $listeners,
class: getClass(this),
style: getStyle(this),
}
const toolTipProps = {
props: {
placement: 'right',
trigger: 'click',
overlayClassName: `${props.rootPrefixCls}-inline-collapsed-tooltip`,
},
on: {},
@ -37,8 +36,7 @@ export default {
{...toolTipProps}
>
<template slot='title'>
jdjjdj
{inlineCollapsed && props.level === 1 ? <span>$slots</span> : ''}
{inlineCollapsed && props.level === 1 ? $slots.default : ''}
</template>
<Item {...itemProps} ref='menuItem'>
{$slots.default}

View File

@ -9,10 +9,6 @@
<AntButton type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
<Icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
</AntButton>
<MenuItem key="1">
<Icon type="pie-chart" />
<span>Option 1</span>
</MenuItem>
<Menu
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
@ -20,11 +16,11 @@
theme="dark"
:inlineCollapsed="collapsed"
>
<!-- <MenuItem key="1">
<MenuItem key="1">
<Icon type="pie-chart" />
<span>Option 1</span>
</MenuItem> -->
<!-- <MenuItem key="2">
</MenuItem>
<MenuItem key="2">
<Icon type="desktop" />
<span>Option 2</span>
</MenuItem>
@ -51,7 +47,7 @@
<MenuItem key="11">Option 11</MenuItem>
<MenuItem key="12">Option 12</MenuItem>
</SubMenu>
</SubMenu> -->
</SubMenu>
</Menu>
</div>
</div>
@ -71,6 +67,15 @@ export default {
toggleCollapsed () {
this.collapsed = !this.collapsed
},
con1 () {
console.log(111)
},
con2 () {
console.log(222)
},
con3 () {
console.log(333)
},
},
components: {
Menu,

View File

@ -16,7 +16,6 @@ function returnEmptyString () {
function returnDocument () {
return window.document
}
const ALL_HANDLERS = ['click', 'mousedown', 'touchStart', 'mouseenter',
'mouseleave', 'focus', 'blur', 'contextMenu']
@ -262,6 +261,7 @@ export default {
getRootDomNode () {
return this.$el
// return this.$el.children[0] || this.$el
},
handleGetPopupClassFromAlign (align) {
@ -322,11 +322,11 @@ export default {
},
ref: 'popup',
style: popupStyle,
key: '_ANT_PORTAL',
}
return (
<Popup
{...popupProps}
ref='popup'
>
{typeof popup === 'function' ? popup(h) : popup}
{popup === undefined ? $slots.popup : null}
@ -396,7 +396,7 @@ export default {
}
},
createTwoChains (event, child) {
createTwoChains (event) {
let fn = () => {
}
const events = this.$listeners
@ -463,17 +463,21 @@ export default {
warning(false, 'Trigger $slots.default.length > 1, just support only one default', true)
}
const child = children[0]
this.childOriginEvents = getEvents(child)
const events = getEvents(child)
// vue使_ANT_EVENT_HACK
if (!events._ANT_EVENT_HACK) {
this.childOriginEvents = events
}
const newChildProps = {
props: {},
on: {},
on: { _ANT_EVENT_HACK: () => {} },
key: 'trigger',
}
if (this.isContextMenuToShow()) {
newChildProps.on.contextMenu = this.onContextMenu
} else {
newChildProps.on.contextMenu = this.createTwoChains('contextMenu', child)
newChildProps.on.contextMenu = this.createTwoChains('contextMenu')
}
if (this.isClickToHide() || this.isClickToShow()) {
@ -481,27 +485,27 @@ export default {
newChildProps.on.mousedown = this.onMousedown
// newChildProps.on.touchStart = this.onTouchStart
} else {
newChildProps.on.click = this.createTwoChains('click', child)
newChildProps.on.mousedown = this.createTwoChains('mousedown', child)
// newChildProps.on.TouchStart = this.createTwoChains('onTouchStart', child)
newChildProps.on.click = this.createTwoChains('click')
newChildProps.on.mousedown = this.createTwoChains('mousedown')
// newChildProps.on.TouchStart = this.createTwoChains('onTouchStart')
}
if (this.isMouseEnterToShow()) {
newChildProps.on.mouseenter = this.onMouseenter
} else {
newChildProps.on.mouseenter = this.createTwoChains('mouseenter', child)
newChildProps.on.mouseenter = this.createTwoChains('mouseenter')
}
if (this.isMouseLeaveToHide()) {
newChildProps.on.mouseleave = this.onMouseleave
} else {
newChildProps.on.mouseleave = this.createTwoChains('mouseleave', child)
newChildProps.on.mouseleave = this.createTwoChains('mouseleave')
}
if (this.isFocusToShow() || this.isBlurToHide()) {
newChildProps.on.focus = this.onFocus
newChildProps.on.blur = this.onBlur
} else {
newChildProps.on.focus = this.createTwoChains('focus', child)
newChildProps.on.blur = this.createTwoChains('blur', child)
newChildProps.on.focus = this.createTwoChains('focus')
newChildProps.on.blur = this.createTwoChains('blur')
}
const { sPopupVisible, forceRender } = this
if (sPopupVisible || forceRender || this._component) {
@ -509,8 +513,8 @@ export default {
} else {
this._component = null
}
newChildProps.addChildren = this._component
const trigger = cloneElement(child, newChildProps, true)
this._component && (newChildProps.addChildren = [this._component])
const trigger = cloneElement(child, newChildProps)
return trigger
},
}