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

refactor: trigger

pull/165/head
tangjinzhou 2018-05-30 14:11:36 +08:00
parent 4e60734212
commit 56e00adb6e
3 changed files with 71 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/_util/ContainerRender.jsx
View File

@ -66,6 +66,13 @@ export default {
} }
}) })
}, },
updated () {
this.$nextTick(() => {
if (ready) {
ready.call(self)
}
})
},
render () { render () {
return getComponent(this.comProps) return getComponent(this.comProps)
}, },

129
components/trigger/Trigger.jsx
View File

@ -1,5 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import antRefDirective from '../_util/antRefDirective'
import PropTypes from '../_util/vue-types' import PropTypes from '../_util/vue-types'
import contains from '../_util/Dom/contains' import contains from '../_util/Dom/contains'
import { hasProp, getComponentFromProp, getEvents, filterEmpty } from '../_util/props-util' import { hasProp, getComponentFromProp, getEvents, filterEmpty } from '../_util/props-util'
@ -10,6 +11,8 @@ import Popup from './Popup'
import { getAlignFromPlacement, getPopupClassNameFromAlign, noop } from './utils' import { getAlignFromPlacement, getPopupClassNameFromAlign, noop } from './utils'
import BaseMixin from '../_util/BaseMixin' import BaseMixin from '../_util/BaseMixin'
import { cloneElement } from '../_util/vnode' import { cloneElement } from '../_util/vnode'
import ContainerRender from '../_util/ContainerRender'
Vue.use(antRefDirective)
function returnEmptyString () { function returnEmptyString () {
return '' return ''
@ -87,6 +90,7 @@ export default {
mounted () { mounted () {
this.$nextTick(() => { this.$nextTick(() => {
this.renderComponent(null)
this.updatedCal() this.updatedCal()
}) })
}, },
@ -98,7 +102,9 @@ export default {
}, },
sPopupVisible (val) { sPopupVisible (val) {
this.$nextTick(() => { this.$nextTick(() => {
this.afterPopupVisibleChange(val) this.renderComponent(null, () => {
this.afterPopupVisibleChange(val)
})
}) })
}, },
}, },
@ -112,11 +118,6 @@ export default {
beforeDestroy () { beforeDestroy () {
this.clearDelayTimer() this.clearDelayTimer()
this.clearOutsideHandler() this.clearOutsideHandler()
if (this._component) {
this._component.$destroy()
this._component = null
this.popupContainer.remove()
}
}, },
methods: { methods: {
updatedCal () { updatedCal () {
@ -172,9 +173,8 @@ export default {
onPopupMouseleave (e) { onPopupMouseleave (e) {
if (e.relatedTarget && !e.relatedTarget.setTimeout && if (e.relatedTarget && !e.relatedTarget.setTimeout &&
this._component && this._component &&
this._component.$refs.popup && this._component.getPopupDomNode &&
this._component.$refs.popup.getPopupDomNode && contains(this._component.getPopupDomNode(), e.relatedTarget)) {
contains(this._component.$refs.popup.getPopupDomNode(), e.relatedTarget)) {
return return
} }
this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay) this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay)
@ -261,8 +261,8 @@ export default {
} }
}, },
getPopupDomNode () { getPopupDomNode () {
if (this._component && this._component.$refs.popup && this._component.$refs.popup.getPopupDomNode) { if (this._component && this._component.getPopupDomNode) {
return this._component.$refs.popup.getPopupDomNode() return this._component.getPopupDomNode()
} }
return null return null
}, },
@ -293,7 +293,10 @@ export default {
} }
return popupAlign return popupAlign
}, },
renderComponent () { savePopup (node) {
this._component = node
},
getComponent () {
const self = this const self = this
const mouseProps = {} const mouseProps = {}
if (this.isMouseEnterToShow()) { if (this.isMouseEnterToShow()) {
@ -308,59 +311,42 @@ export default {
mask, zIndex, popupTransitionName, getPopupAlign, mask, zIndex, popupTransitionName, getPopupAlign,
maskAnimation, maskTransitionName, getContainer } = self maskAnimation, maskTransitionName, getContainer } = self
const popupProps = { const popupProps = {
prefixCls, props: {
destroyPopupOnHide, prefixCls,
visible: sPopupVisible, destroyPopupOnHide,
action, visible: sPopupVisible,
align: getPopupAlign(), action,
animation: popupAnimation, align: getPopupAlign(),
getClassNameFromAlign: handleGetPopupClassFromAlign, animation: popupAnimation,
getRootDomNode, getClassNameFromAlign: handleGetPopupClassFromAlign,
mask, getRootDomNode,
zIndex, mask,
transitionName: popupTransitionName, zIndex,
maskAnimation, transitionName: popupTransitionName,
maskTransitionName, maskAnimation,
getContainer, maskTransitionName,
popupClassName, getContainer,
popupStyle, popupClassName,
popupEvents: { popupStyle,
},
on: {
align: self.$listeners.popupAlign || noop, align: self.$listeners.popupAlign || noop,
...mouseProps, ...mouseProps,
}, },
} directives: [
if (!this._component) { {
const div = document.createElement('div') name: 'ant-ref',
this.getContainer().appendChild(div) value: this.savePopup,
this._component = new Vue({
data () {
return {
popupProps: { ...popupProps },
}
}, },
parent: self, ],
el: div,
render () {
const { popupEvents, ...otherProps } = this.popupProps
const p = {
props: otherProps,
on: popupEvents,
ref: 'popup',
// style: popupStyle,
}
return (
<Popup
{...p}
>
{getComponentFromProp(self, 'popup')}
</Popup>
)
},
})
} else {
this._component.popupProps = popupProps
} }
return this._component return (
<Popup
{...popupProps}
>
{getComponentFromProp(self, 'popup')}
</Popup>
)
}, },
getContainer () { getContainer () {
@ -479,8 +465,8 @@ export default {
return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1 return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1
}, },
forcePopupAlign () { forcePopupAlign () {
if (this.$data.sPopupVisible && this._component && this._component.$refs.popup && this._component.$refs.popup.$refs.alignInstance) { if (this.$data.sPopupVisible && this._component && this._component.alignInstance) {
this._component.$refs.popup.$refs.alignInstance.forceAlign() this._component.alignInstance.forceAlign()
} }
}, },
fireEvents (type, e) { fireEvents (type, e) {
@ -541,11 +527,22 @@ export default {
newChildProps.on.blur = this.createTwoChains('blur') newChildProps.on.blur = this.createTwoChains('blur')
} }
const { sPopupVisible, forceRender } = this const { sPopupVisible, forceRender } = this
if (sPopupVisible || forceRender || this._component) {
this.renderComponent(h)
}
const trigger = cloneElement(child, newChildProps) const trigger = cloneElement(child, newChildProps)
return trigger
return (
<ContainerRender
parent={this}
visible={sPopupVisible}
autoMount={false}
forceRender={forceRender}
getComponent={this.getComponent}
getContainer={this.getContainer}
children={({ renderComponent }) => {
this.renderComponent = renderComponent
return trigger
}}
/>
)
}, },
} }

1
components/trigger/demo/simple.vue
View File

@ -60,6 +60,7 @@ export default {
offsetY: undefined, offsetY: undefined,
transitionName: 'rc-trigger-popup-zoom', transitionName: 'rc-trigger-popup-zoom',
destroyPopupOnHide: false, destroyPopupOnHide: false,
destroyed: false,
} }
}, },
methods: { methods: {