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

优化 trigger

pull/9/head
tjz 2018-01-20 20:24:42 +08:00
parent 90fd428942
commit f3c23a2bc1
3 changed files with 165 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/trigger/Popup.vue
View File

@ -26,13 +26,14 @@ export default {
data () {
return {
destroyPopup: false,
initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化
initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化,避免位置计算不正确
}
},
mounted () {
this.rootNode = this.getPopupDomNode()
this._container = this.getContainer()
this._container.appendChild(this.$el)
this.$nextTick(() => {
this.initAlign = true
})
@ -46,14 +47,14 @@ export default {
this.destroyPopup = false
}
},
initAlign (val) {
if (val) {
this.$nextTick(() => {
// console.log(this.$refs.alignInstance.$el)
// this.$refs.alignInstance.forceAlign()
})
}
},
// initAlign (val) {
// if (val) {
// this.$nextTick(() => {
// // console.log(this.$refs.alignInstance.$el)
// // this.$refs.alignInstance.forceAlign()
// })
// }
// },
},
methods: {
onAlign (popupDomNode, align) {

83
components/trigger/index.vue
View File

@ -1,4 +1,5 @@
<script>
import Vue from 'vue'
import PropTypes from '../_util/vue-types'
import contains from '../_util/Dom/contains'
import { hasProp, getComponentFromProp } from '../_util/props-util'
@ -78,7 +79,6 @@ export default {
beforeCreate () {
ALL_HANDLERS.forEach((h) => {
this[`fire${h}`] = (e) => {
// const ev = `on${h[0].toUpperCase() + h.slice(1)}`
this.fireEvents(h, e)
}
})
@ -107,6 +107,10 @@ export default {
beforeDestroy () {
this.clearDelayTimer()
this.clearOutsideHandler()
if (this._component) {
this._component.$destroy()
this._component = null
}
},
methods: {
updatedCal () {
@ -163,9 +167,9 @@ export default {
onPopupMouseleave (e) {
if (e.relatedTarget && !e.relatedTarget.setTimeout &&
this.$refs.popup &&
this.$refs.popup.getPopupDomNode &&
contains(this.$refs.popup.getPopupDomNode(), e.relatedTarget)) {
this._component.$refs.popup &&
this._component.$refs.popup.getPopupDomNode &&
contains(this._component.$refs.popup.getPopupDomNode(), e.relatedTarget)) {
return
}
this.delaySetPopupVisible(false, this.$props.mouseLeaveDelay)
@ -252,9 +256,8 @@ export default {
}
},
getPopupDomNode () {
// for test
if (this.$refs.popup && this.$refs.popup.getPopupDomNode) {
return this.$refs.popup.getPopupDomNode()
if (this._component.$refs.popup && this._component.$refs.popup.getPopupDomNode) {
return this._component.$refs.popup.getPopupDomNode()
}
return null
},
@ -285,21 +288,21 @@ export default {
}
return popupAlign
},
getComponent (h) {
renderComponent () {
const self = this
const mouseProps = {}
if (this.isMouseEnterToShow()) {
mouseProps.mouseenter = this.onPopupMouseenter
mouseProps.mouseenter = self.onPopupMouseenter
}
if (this.isMouseLeaveToHide()) {
mouseProps.mouseleave = this.onPopupMouseleave
mouseProps.mouseleave = self.onPopupMouseleave
}
const { prefixCls, destroyPopupOnHide, sPopupVisible,
popupStyle, popupClassName, action,
popupAnimation, handleGetPopupClassFromAlign, getRootDomNode,
mask, zIndex, popupTransitionName, getPopupAlign,
maskAnimation, maskTransitionName, getContainer } = this
maskAnimation, maskTransitionName, getContainer } = self
const popupProps = {
props: {
prefixCls,
destroyPopupOnHide,
visible: sPopupVisible,
@ -315,22 +318,41 @@ export default {
maskTransitionName,
getContainer,
popupClassName,
},
on: {
align: this.$listeners.popupAlign || noop,
popupStyle,
popupEvents: {
align: self.$listeners.popupAlign || noop,
...mouseProps,
},
}
if (!this._component) {
const div = document.createElement('div')
this._component = new Vue({
props: {
},
data () {
return {}
},
el: div,
render () {
const { $props } = this
const { popupStyle, popupEvents, ...otherProps } = $props
const p = {
props: otherProps,
on: popupEvents,
ref: 'popup',
style: popupStyle,
key: '_ANT_PORTAL',
}
return (
<Popup
{...popupProps}
return ($props.getContainer ? <Popup
{...p}
>
{getComponentFromProp(this, 'popup')}
</Popup>
)
{getComponentFromProp(self, 'popup')}
</Popup> : null)
},
})
}
Object.assign(this._component.$props, popupProps)
this._component.$forceUpdate()
},
getContainer () {
@ -441,8 +463,8 @@ export default {
return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1
},
forcePopupAlign () {
if (this.$data.sPopupVisible && this.$refs.popup && this.$refs.popup.$refs.alignInstance) {
this.$refs.popup.$refs.alignInstance.forceAlign()
if (this.$data.sPopupVisible && this._component.$refs.popup && this._component.$refs.popup.$refs.alignInstance) {
this._component.$refs.popup.$refs.alignInstance.forceAlign()
}
},
fireEvents (type, e) {
@ -508,18 +530,7 @@ export default {
}
const { sPopupVisible, forceRender } = this
if (sPopupVisible || forceRender || this._component) {
this._component = this.getComponent(h)
} else {
this._component = null
}
if (child.componentOptions) {
child.componentOptions.children = child.componentOptions.children || []
child.componentOptions.children = child.componentOptions.children.filter(c => c.key !== '_ANT_PORTAL')
this._component && child.componentOptions.children.push(this._component)
} else {
child.children = child.children || []
child.children = child.children.filter(c => c.key !== '_ANT_PORTAL')
this._component && child.children.push(this._component)
this.renderComponent(h)
}
const trigger = cloneElement(child, newChildProps)
return trigger

2
package.json
View File

@ -4,7 +4,7 @@
"description": "vue component",
"main": "index.js",
"scripts": {
"start": "NODE_ENV=development webpack-dev-server --open --hot",
"start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
"test": "karma start test/karma.conf.js --single-run",
"lint": "eslint -c ./.eslintrc --fix --ext .js ./src/",
"lint:style": "stylelint \"./src/**/*.less\" --syntax less"