add menu

components/_util/BaseMixin.js

@@ -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))
+        }
       }
     },
   },

components/_util/vnode.js

@@ -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
+}

components/menu/MenuItem.vue

@@ -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,

components/menu/demo/antd.vue

@@ -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>
     )

components/menu/demo/horizontal.vue

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

components/menu/src/Menu.vue

@@ -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')) {

components/menu/src/MenuItem.vue

@@ -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,

components/menu/src/MenuMixin.js

@@ -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)
     },
 

components/menu/src/SubMenu.vue

@@ -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,39 +259,58 @@ 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,
+        })
       }
-    },
-
-    clearSubMenuLeaveTimer () {
-      const parentMenuContext = this.parentMenuContext
-      if (parentMenuContext.subMenuLeaveTimer) {
-        clearTimeout(parentMenuContext.subMenuLeaveTimer)
-        parentMenuContext.subMenuLeaveTimer = null
-        parentMenuContext.subMenuLeaveFn = null
+      if (type === 'mouseenter') {
+      // make sure mouseenter happen after other menu item's mouseleave
+        this.mouseenterTimeout = setTimeout(() => {
+          openChange()
+        }, 0)
+      } else {
+        openChange()
       }
     },
 
+    // 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 }
       loopMenuItemRecusively(this.$slots.default, this.$props.selectedKeys, ret)
@@ -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}

components/menu/src/SubPopupMenu.vue

@@ -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],

components/trigger/Popup.vue

@@ -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)
         } }

components/trigger/index.vue

@@ -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
   },
 }