github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add menu

pull/9/head
tangjinzhou 2018-01-17 16:12:53 +08:00
parent 94b420dbc3
commit 3af108ffcb
12 changed files with 213 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/_util/BaseMixin.js
View File

@ -8,8 +8,14 @@ export default {
},
__emit () { // 直接调用listeners，底层组件不需要vueTool记录events
const args = [].slice.call(arguments, 0)
if (args.length && this.$listeners[args[0]]) {
this.$listeners[args[0]](...args.slice(1))
const filterEvent = []
const eventName = args[0]
if (args.length && this.$listeners[eventName]) {
if (filterEvent.includes(eventName)) {
this.$emit(eventName, ...args.slice(1))
} else {
this.$listeners[eventName](...args.slice(1))
}
}
},
},

65
components/_util/vnode.js
View File

@ -1,34 +1,9 @@
import clonedeep from 'lodash.clonedeep'
// export function cloneVNode (vnode, deep) {
// const cloned = new vnode.constructor(
// vnode.tag,
// clonedeep(vnode.data),
// vnode.children,
// vnode.text,
// vnode.elm,
// vnode.context,
// clonedeep(vnode.componentOptions),
// vnode.asyncFactory
// )
// cloned.ns = vnode.ns
// cloned.isStatic = vnode.isStatic
// cloned.key = vnode.key
// cloned.isComment = vnode.isComment
// cloned.isCloned = true
// if (deep && vnode.children) {
// cloned.children = cloneVNodes(vnode.children, deep)
// }
// return cloned
// }
import cloneDeep from 'lodash.clonedeep'
export function cloneVNode (vnode, deep) {
const componentOptions = vnode.componentOptions
// if (componentOptions) {
// componentOptions.propsData = componentOptions.propsData ? clonedeep(componentOptions.propsData) : componentOptions.propsData
// }
const cloned = new vnode.constructor(
vnode.tag,
clonedeep(vnode.data),
vnode.data,
vnode.children,
vnode.text,
vnode.elm,
@ -66,21 +41,25 @@ export function cloneVNodes (vnodes, deep) {
export function cloneElement (n, nodeProps, clone) {
const node = clone ? cloneVNode(n, true) : n
const { props = {}, key, on = {}} = nodeProps
if (node.componentOptions) {
node.componentOptions.propsData = node.componentOptions.propsData || {}
node.componentOptions.listeners = node.componentOptions.listeners || {}
Object.assign(node.componentOptions.propsData, props)
Object.assign(node.componentOptions.listeners, on)
}
const { props = {}, key, on = {}, addChildren } = nodeProps
const data = node.data || {}
const { style = data.style,
class: cls = data.class,
attrs = data.attrs,
ref,
} = nodeProps
node.data = Object.assign(data, { style, attrs, class: cls, on: { ...(data.on || {}), ...on }})
node.data = Object.assign(data, { style, attrs, class: cls })
if (node.componentOptions) {
node.componentOptions.propsData = node.componentOptions.propsData || {}
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)
} else {
addChildren && (node.children = [...(node.children || []), addChildren])
node.data.on = { ...(node.data.on || {}), ...on }
}
if (key !== undefined) {
node.key = key
node.data.key = key
@ -105,3 +84,17 @@ export function getClass (ele) {
export function getStyle (ele) {
return ele.data && (ele.data.style || ele.data.staticStyle)
}
export function filterEmpty (children = []) {
return children.filter(c => c.tag || c.text.trim() !== '')
}
export function getEvents (child) {
let events = {}
if (child.componentOptions && child.componentOptions.listeners) {
events = child.componentOptions.listeners
} else if (child.data && child.data.on) {
events = child.data.on
}
return events
}

3
components/menu/MenuItem.vue
View File

@ -2,6 +2,7 @@
import { Item, itemProps } from './src/index'
import { getClass, getStyle } from '../_util/vnode'
import Tooltip from '../tooltip'
import { getComponentFromProp } from '../_util/props-util'
export default {
props: itemProps,
@ -14,7 +15,7 @@ export default {
this.$refs.menuItem.onKeyDown(e)
},
},
render () {
render (h) {
const { inlineCollapsed, $props: props, $slots, $attrs: attrs, $listeners } = this
const itemProps = {
props,

6
components/menu/demo/antd.vue
View File

@ -76,7 +76,7 @@ export default {
console.log('onOpenChange', value, this.$refs)
}
const commonMenu = () => (
<Menu onSelect={handleSelect} onOpenChange={onOpenChange}>
<Menu onSelect={handleSelect} onOpenChange={onOpenChange} onClick={(e) => console.log('click', e)}>
<SubMenu ref='test' key='1' title={<span>sub menu</span>}>
<MenuItem key='1-1'>
0-1
@ -103,7 +103,7 @@ export default {
{commonMenu()}
</Clone>
</div>
<h3>horizontal and click</h3>
{/* <h3>horizontal and click</h3>
<div style={{ margin: '20px', width: '800px' }}>
<Clone childProps={{
mode: 'horizontal',
@ -131,7 +131,7 @@ export default {
openAnimation: animation,
}} >
{commonMenu()}
</Clone></div>
</Clone></div>*/}
</div>
</div>
)

1
components/menu/demo/horizontal.vue
View File

@ -43,6 +43,7 @@ export default {
},
methods: {
handleClick (e) {
console.log(e)
this.current = e.key
},
},

34
components/menu/src/Menu.vue
View File

@ -49,19 +49,19 @@ const Menu = {
},
},
methods: {
onDestroy (key) {
const state = this.$data
const sSelectedKeys = state.sSelectedKeys
const sOpenKeys = state.sOpenKeys
let index = sSelectedKeys.indexOf(key)
if (!hasProp(this, 'selectedKeys') && index !== -1) {
sSelectedKeys.splice(index, 1)
}
index = sOpenKeys.indexOf(key)
if (!hasProp(this, 'openKeys') && index !== -1) {
sOpenKeys.splice(index, 1)
}
},
// onDestroy (key) {
// const state = this.$data
// const sSelectedKeys = state.sSelectedKeys
// const sOpenKeys = state.sOpenKeys
// let index = sSelectedKeys.indexOf(key)
// if (!hasProp(this, 'selectedKeys') && index !== -1) {
// sSelectedKeys.splice(index, 1)
// }
// index = sOpenKeys.indexOf(key)
// if (!hasProp(this, 'openKeys') && index !== -1) {
// sOpenKeys.splice(index, 1)
// }
// },
onSelect (selectInfo) {
const props = this.$props
@ -90,7 +90,7 @@ const Menu = {
this.__emit('click', e)
},
onOpenChange (e_) {
onOpenChange (event) {
const sOpenKeys = this.$data.sOpenKeys.concat()
let changed = false
const processSingle = (e) => {
@ -109,11 +109,11 @@ const Menu = {
}
changed = changed || oneChanged
}
if (Array.isArray(e_)) {
if (Array.isArray(event)) {
// batch change call
e_.forEach(processSingle)
event.forEach(processSingle)
} else {
processSingle(e_)
processSingle(event)
}
if (changed) {
if (!hasProp(this, 'openKeys')) {

18
components/menu/src/MenuItem.vue
View File

@ -15,7 +15,7 @@ const props = {
level: PropTypes.number.def(1),
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
parentMenu: PropTypes.object,
clearSubMenuTimers: PropTypes.func.def(noop),
// clearSubMenuTimers: PropTypes.func.def(noop),
}
const MenuItem = {
name: 'MenuItem',
@ -30,12 +30,6 @@ const MenuItem = {
this.__emit('destroy', props.eventKey)
},
methods: {
__emit () { // 直接调用listeners，底层组件不需要vueTool记录events
const args = [].slice.call(arguments, 0)
if (args.length && this.$listeners[args[0]]) {
this.$listeners[args[0]](...args.slice(1))
}
},
onKeyDown (e) {
const keyCode = e.keyCode
if (keyCode === KeyCode.ENTER) {
@ -57,10 +51,10 @@ const MenuItem = {
},
onMouseEnter (e) {
const { eventKey, parentMenuContext } = this
if (parentMenuContext && parentMenuContext.subMenuInstance) {
parentMenuContext.subMenuInstance.clearSubMenuTimers()
}
const { eventKey } = this
// if (parentMenuContext && parentMenuContext.subMenuInstance) {
// parentMenuContext.subMenuInstance.clearSubMenuTimers()
// }
this.__emit('itemHover', {
key: eventKey,
hover: true,
@ -80,6 +74,7 @@ const MenuItem = {
item: this,
domEvent: e,
}
this.__emit('click', info)
if (multiple) {
if (selected) {
@ -130,6 +125,7 @@ const MenuItem = {
'aria-disabled': props.disabled,
}
let mouseEvent = {}
if (!props.disabled) {
mouseEvent = {
click: this.onClick,

8
components/menu/src/MenuMixin.js
View File

@ -167,16 +167,16 @@ export default {
itemHover: this.onItemHover,
openChange: this.onOpenChange,
deselect: this.onDeselect,
destroy: this.onDestroy,
// destroy: this.onDestroy,
select: this.onSelect,
},
}
if (props.mode === 'inline') {
newChildProps.props.triggerSubMenuAction = 'click'
}
if (!extraProps.isRootMenu) {
newChildProps.props.clearSubMenuTimers = this.clearSubMenuTimers
}
// if (!extraProps.isRootMenu) {
// newChildProps.props.clearSubMenuTimers = this.clearSubMenuTimers
// }
return cloneElement(child, newChildProps)
},

161
components/menu/src/SubMenu.vue
View File

@ -21,7 +21,7 @@ export default {
name: 'SubMenu',
props: {
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
title: PropTypes.any.def(''),
title: PropTypes.any,
selectedKeys: PropTypes.array.def([]),
openKeys: PropTypes.array.def([]),
openChange: PropTypes.func.def(noop),
@ -42,6 +42,7 @@ export default {
subMenuCloseDelay: PropTypes.number.def(0.1),
level: PropTypes.number.def(1),
inlineIndent: PropTypes.number.def(24),
openTransitionName: PropTypes.string,
},
inject: {
parentMenuContext: { default: undefined },
@ -63,10 +64,16 @@ export default {
},
beforeDestroy () {
const { eventKey, parentMenuContext } = this
const { eventKey } = this
this.__emit('destroy', eventKey)
if (parentMenuContext.subMenuInstance === this) {
this.clearSubMenuTimers()
// if (parentMenuContext.subMenuInstance === this) {
// this.clearSubMenuTimers()
// }
if (this.minWidthTimeout) {
clearTimeout(this.minWidthTimeout)
}
if (this.mouseenterTimeout) {
clearTimeout(this.mouseenterTimeout)
}
},
methods: {
@ -75,15 +82,16 @@ export default {
if (mode !== 'horizontal' || !isRootMenu || !this.isOpen()) {
return
}
setTimeout(() => {
if (!this.subMenuTitle || !this.menuInstance) {
const self = this
this.minWidthTimeout = setTimeout(() => {
if (!self.$refs.subMenuTitle || !self.$refs.menuInstance) {
return
}
const popupMenu = this.$refs.menuInstance.$el
if (popupMenu.offsetWidth >= this.subMenuTitle.offsetWidth) {
const popupMenu = self.$refs.menuInstance.$el
if (popupMenu.offsetWidth >= self.$refs.subMenuTitle.offsetWidth) {
return
}
popupMenu.style.minWidth = `${this.subMenuTitle.offsetWidth}px`
popupMenu.style.minWidth = `${self.$refs.subMenuTitle.offsetWidth}px`
}, 0)
},
@ -136,7 +144,7 @@ export default {
onMouseEnter (e) {
const { eventKey: key } = this.$props
this.clearSubMenuLeaveTimer()
// this.clearSubMenuLeaveTimer()
this.setState({
defaultActiveFirst: false,
})
@ -152,20 +160,24 @@ export default {
parentMenuContext,
} = this
parentMenuContext.subMenuInstance = this
parentMenuContext.subMenuLeaveFn = () => {
// trigger mouseleave
this.__emit('mouseleave', {
key: eventKey,
domEvent: e,
})
}
// parentMenuContext.subMenuLeaveFn = () => {
// // trigger mouseleave
// this.__emit('mouseleave', {
// key: eventKey,
// domEvent: e,
// })
// }
this.__emit('mouseleave', {
key: eventKey,
domEvent: e,
})
// prevent popup menu and submenu gap
parentMenuContext.subMenuLeaveTimer = setTimeout(parentMenuContext.subMenuLeaveFn, 100)
// parentMenuContext.subMenuLeaveTimer = setTimeout(parentMenuContext.subMenuLeaveFn, 100)
},
onTitleMouseEnter (domEvent) {
const { eventKey: key } = this.$props
this.clearSubMenuTitleLeaveTimer()
// this.clearSubMenuTitleLeaveTimer()
this.__emit('itemHover', {
key,
hover: true,
@ -179,17 +191,25 @@ export default {
onTitleMouseLeave (e) {
const { eventKey, parentMenuContext } = this
parentMenuContext.subMenuInstance = this
parentMenuContext.subMenuTitleLeaveFn = () => {
this.__emit('itemHover', {
key: eventKey,
hover: false,
})
this.__emit('titleMouseleave', {
key: eventKey,
domEvent: e,
})
}
parentMenuContext.subMenuTitleLeaveTimer = setTimeout(parentMenuContext.subMenuTitleLeaveFn, 100)
this.__emit('itemHover', {
key: eventKey,
hover: false,
})
this.__emit('titleMouseleave', {
key: eventKey,
domEvent: e,
})
// parentMenuContext.subMenuTitleLeaveFn = () => {
// this.__emit('itemHover', {
// key: eventKey,
// hover: false,
// })
// this.__emit('titleMouseleave', {
// key: eventKey,
// domEvent: e,
// })
// }
// parentMenuContext.subMenuTitleLeaveTimer = setTimeout(parentMenuContext.subMenuTitleLeaveFn, 100)
},
onTitleClick (e) {
@ -239,38 +259,57 @@ export default {
}
},
// triggerOpenChange (open, type) {
// const key = this.$props.eventKey
// this.__emit('openChange', {
// key,
// item: this,
// trigger: type,
// open,
// })
// },
triggerOpenChange (open, type) {
const key = this.$props.eventKey
this.__emit('openChange', {
key,
item: this,
trigger: type,
open,
})
},
clearSubMenuTimers () {
this.clearSubMenuLeaveTimer()
this.clearSubMenuTitleLeaveTimer()
},
clearSubMenuTitleLeaveTimer () {
const parentMenuContext = this.parentMenuContext
if (parentMenuContext.subMenuTitleLeaveTimer) {
clearTimeout(parentMenuContext.subMenuTitleLeaveTimer)
parentMenuContext.subMenuTitleLeaveTimer = null
parentMenuContext.subMenuTitleLeaveFn = null
const openChange = () => {
this.__emit('openChange', {
key,
item: this,
trigger: type,
open,
})
}
if (type === 'mouseenter') {
// make sure mouseenter happen after other menu item's mouseleave
this.mouseenterTimeout = setTimeout(() => {
openChange()
}, 0)
} else {
openChange()
}
},
clearSubMenuLeaveTimer () {
const parentMenuContext = this.parentMenuContext
if (parentMenuContext.subMenuLeaveTimer) {
clearTimeout(parentMenuContext.subMenuLeaveTimer)
parentMenuContext.subMenuLeaveTimer = null
parentMenuContext.subMenuLeaveFn = null
}
},
// clearSubMenuTimers () {
// this.clearSubMenuLeaveTimer()
// this.clearSubMenuTitleLeaveTimer()
// },
// clearSubMenuTitleLeaveTimer () {
// const parentMenuContext = this.parentMenuContext
// if (parentMenuContext.subMenuTitleLeaveTimer) {
// clearTimeout(parentMenuContext.subMenuTitleLeaveTimer)
// parentMenuContext.subMenuTitleLeaveTimer = null
// parentMenuContext.subMenuTitleLeaveFn = null
// }
// },
// clearSubMenuLeaveTimer () {
// const parentMenuContext = this.parentMenuContext
// if (parentMenuContext.subMenuLeaveTimer) {
// clearTimeout(parentMenuContext.subMenuLeaveTimer)
// parentMenuContext.subMenuLeaveTimer = null
// parentMenuContext.subMenuLeaveFn = null
// }
// },
isChildrenSelected () {
const ret = { find: false }
@ -284,7 +323,7 @@ export default {
renderChildren (children, vShow) {
const props = this.$props
const isOpen = this.isOpen()
const { select, deselect, destroy, openChange } = this.$listeners
const { select, deselect, openChange } = this.$listeners
const subPopupMenuProps = {
props: {
mode: props.mode === 'horizontal' ? 'vertical' : props.mode,
@ -304,11 +343,11 @@ export default {
defaultActiveFirst: this.$data.defaultActiveFirst,
multiple: props.multiple,
prefixCls: props.rootPrefixCls,
clearSubMenuTimers: this.clearSubMenuTimers,
// clearSubMenuTimers: this.clearSubMenuTimers,
},
on: {
click: this.onSubMenuClick,
select, deselect, destroy, openChange,
select, deselect, openChange,
},
id: this._menuId,
ref: 'menuInstance',
@ -448,7 +487,7 @@ export default {
onPopupVisibleChange={this.onPopupVisibleChange}
forceRender={props.forceSubMenuRender}
// popupTransitionName='rc-menu-open-slide-up'
popupAnimation={animProps}
popupAnimation={transitionProps}
>
<template slot='popup'>
{this.haveOpened ? children : null}

2
components/menu/src/SubPopupMenu.vue
View File

@ -7,7 +7,7 @@ import { noop } from './util'
export default {
name: 'SubPopupMenu',
props: { ...commonPropsType,
clearSubMenuTimers: PropTypes.func.def(noop),
// clearSubMenuTimers: PropTypes.func.def(noop),
},
mixins: [MenuMixin, BaseMixin],

15
components/trigger/Popup.vue
View File

@ -88,8 +88,13 @@ export default {
getTransitionName () {
const props = this.$props
let transitionName = props.transitionName
if (!transitionName && typeof props.animation === 'string') {
transitionName = `${props.animation}`
const animation = props.animation
if (!transitionName) {
if (typeof animation === 'string') {
transitionName = `${animation}`
} else if (animation.props && animation.props.name) {
transitionName = animation.props.name
}
}
return transitionName
},
@ -152,9 +157,9 @@ export default {
}
if (typeof animation === 'object') {
const { on = {}, ...otherProps } = animation
transitionProps.props = { ...transitionProps.props, ...otherProps }
transitionProps.on = { ...on, afterLeave: (el) => {
const { on = {}, props = {}} = animation
transitionProps.props = { ...transitionProps.props, ...props }
transitionProps.on = { ...transitionEvent, ...on, afterLeave: (el) => {
transitionEvent.afterLeave(el)
on.afterLeave && on.afterLeave(el)
} }

66
components/trigger/index.vue
View File

@ -7,7 +7,7 @@ import warning from '../_util/warning'
import Popup from './Popup'
import { getAlignFromPlacement, getPopupClassNameFromAlign, noop } from './utils'
import BaseMixin from '../_util/BaseMixin'
import { cloneElement, cloneVNode } from '../_util/vnode'
import { cloneElement, filterEmpty, getEvents } from '../_util/vnode'
function returnEmptyString () {
return ''
@ -79,8 +79,8 @@ export default {
beforeCreate () {
ALL_HANDLERS.forEach((h) => {
this[`fire${h}`] = (e) => {
const ev = `on${h[0].toUpperCase() + h.slice(1)}`
this.fireEvents(ev, e)
// const ev = `on${h[0].toUpperCase() + h.slice(1)}`
this.fireEvents(h, e)
}
})
},
@ -258,7 +258,7 @@ export default {
},
getRootDomNode () {
return this.$el.children ? this.$el.children[0] : this.$el
return this.$el
},
handleGetPopupClassFromAlign (align) {
@ -401,18 +401,14 @@ export default {
}
},
createTwoChains (event) {
const child = this.$slots.default[0]
createTwoChains (event, child) {
let fn = () => {
}
child.data = child.data || {}
child.data.on = child.data.on || {}
const childEvents = child.data.on
const events = (this.data ? this.data.on : {}) || {}
if (childEvents[event] && events[event]) {
const events = this.$listeners
if (this.childOriginEvents[event] && events[event]) {
return this[`fire${event}`]
}
fn = childEvents[event] || events[event] || fn
fn = this.childOriginEvents[event] || events[event] || fn
return fn
},
@ -456,13 +452,10 @@ export default {
}
},
fireEvents (type, e) {
const child = this.$slots.default[0]
if (child && child.data && child.data.on && child.data.on[type]) {
child.data.on[type](e)
}
if (this.data && this.data.on && this.data.on[type]) {
this.data.on[type](e)
if (this.childOriginEvents[type]) {
this.childOriginEvents[type](e)
}
this.__emit(type, e)
},
close () {
@ -470,11 +463,12 @@ export default {
},
},
render (h) {
const children = this.$slots.default
const children = filterEmpty(this.$slots.default)
if (children.length > 1) {
warning(false, 'Trigger $slots.default.length > 1, just support only one default', true)
}
const child = children[0]
this.childOriginEvents = getEvents(child)
const newChildProps = {
props: {},
on: {},
@ -484,7 +478,7 @@ export default {
if (this.isContextMenuToShow()) {
newChildProps.on.contextMenu = this.onContextMenu
} else {
newChildProps.on.contextMenu = this.createTwoChains('contextMenu')
newChildProps.on.contextMenu = this.createTwoChains('contextMenu', child)
}
if (this.isClickToHide() || this.isClickToShow()) {
@ -492,42 +486,44 @@ export default {
newChildProps.on.mousedown = this.onMousedown
// newChildProps.on.touchStart = this.onTouchStart
} else {
newChildProps.on.click = this.createTwoChains('click')
newChildProps.on.mousedown = this.createTwoChains('mousedown')
// newChildProps.on.TouchStart = this.createTwoChains('onTouchStart')
newChildProps.on.click = this.createTwoChains('click', child)
newChildProps.on.mousedown = this.createTwoChains('mousedown', child)
// newChildProps.on.TouchStart = this.createTwoChains('onTouchStart', child)
}
if (this.isMouseEnterToShow()) {
newChildProps.on.mouseenter = this.onMouseenter
} else {
newChildProps.on.mouseenter = this.createTwoChains('mouseenter')
newChildProps.on.mouseenter = this.createTwoChains('mouseenter', child)
}
if (this.isMouseLeaveToHide()) {
newChildProps.on.mouseleave = this.onMouseleave
} else {
newChildProps.on.mouseleave = this.createTwoChains('mouseleave')
newChildProps.on.mouseleave = this.createTwoChains('mouseleave', child)
}
if (this.isFocusToShow() || this.isBlurToHide()) {
newChildProps.on.focus = this.onFocus
newChildProps.on.blur = this.onBlur
} else {
newChildProps.on.focus = this.createTwoChains('focus')
newChildProps.on.blur = this.createTwoChains('blur')
newChildProps.on.focus = this.createTwoChains('focus', child)
newChildProps.on.blur = this.createTwoChains('blur', child)
}
const trigger = cloneElement(cloneVNode(child), newChildProps)
const { sPopupVisible, forceRender } = this
if (sPopupVisible || forceRender || this._component) {
this._component = this.getComponent(h)
} else {
this._component = null
}
return (
<span>
{trigger}
{this._component}
</span>
)
newChildProps.addChildren = this._component
// // 复制一份事件，防止cloneElement
// if (child.componentOptions && child.componentOptions.listeners) {
// console.log(child.componentOptions.listeners)
// child.componentOptions.listeners = { ...child.componentOptions.listeners }
// } else if (child.data && child.data.on) {
// child.data.on = { ...child.data.on }
// }
const trigger = cloneElement(child, newChildProps)
return trigger
},
}