优化 trigger
tjz
parent
90fd428942
commit
f3c23a2bc1
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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,52 +288,71 @@ 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,
|
||||
action,
|
||||
align: getPopupAlign(),
|
||||
animation: popupAnimation,
|
||||
getClassNameFromAlign: handleGetPopupClassFromAlign,
|
||||
getRootDomNode,
|
||||
mask,
|
||||
zIndex,
|
||||
transitionName: popupTransitionName,
|
||||
maskAnimation,
|
||||
maskTransitionName,
|
||||
getContainer,
|
||||
popupClassName,
|
||||
},
|
||||
on: {
|
||||
align: this.$listeners.popupAlign || noop,
|
||||
prefixCls,
|
||||
destroyPopupOnHide,
|
||||
visible: sPopupVisible,
|
||||
action,
|
||||
align: getPopupAlign(),
|
||||
animation: popupAnimation,
|
||||
getClassNameFromAlign: handleGetPopupClassFromAlign,
|
||||
getRootDomNode,
|
||||
mask,
|
||||
zIndex,
|
||||
transitionName: popupTransitionName,
|
||||
maskAnimation,
|
||||
maskTransitionName,
|
||||
getContainer,
|
||||
popupClassName,
|
||||
popupStyle,
|
||||
popupEvents: {
|
||||
align: self.$listeners.popupAlign || noop,
|
||||
...mouseProps,
|
||||
},
|
||||
ref: 'popup',
|
||||
style: popupStyle,
|
||||
key: '_ANT_PORTAL',
|
||||
}
|
||||
return (
|
||||
<Popup
|
||||
{...popupProps}
|
||||
>
|
||||
{getComponentFromProp(this, 'popup')}
|
||||
</Popup>
|
||||
)
|
||||
|
||||
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,
|
||||
}
|
||||
return ($props.getContainer ? <Popup
|
||||
{...p}
|
||||
>
|
||||
{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
|
||||
|
|
|
|||
180
package.json
180
package.json
|
|
@ -1,91 +1,91 @@
|
|||
{
|
||||
"name": "vue-ant-design",
|
||||
"version": "1.0.0",
|
||||
"description": "vue component",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "NODE_ENV=development 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"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vueComponent/ant-design.git"
|
||||
},
|
||||
"keywords": [
|
||||
"vue"
|
||||
],
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/vueComponent/ant-design/issues"
|
||||
},
|
||||
"homepage": "https://github.com/vueComponent/ant-design#readme",
|
||||
"pre-commit": [
|
||||
"lint",
|
||||
"lint:style"
|
||||
],
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-eslint": "^8.0.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.2",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-istanbul": "^4.1.1",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"chai": "^4.1.2",
|
||||
"css-loader": "^0.28.7",
|
||||
"eslint": "^4.7.2",
|
||||
"eslint-plugin-html": "^3.2.2",
|
||||
"eslint-plugin-vue-libs": "^1.2.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"istanbul-instrumenter-loader": "^3.0.0",
|
||||
"karma": "^1.4.1",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-coverage-istanbul-reporter": "^1.3.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.2",
|
||||
"karma-phantomjs-shim": "^1.4.0",
|
||||
"karma-sinon-chai": "^1.3.1",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.31",
|
||||
"karma-webpack": "^2.0.2",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^4.0.5",
|
||||
"marked": "^0.3.7",
|
||||
"mocha": "^3.2.0",
|
||||
"pre-commit": "^1.2.2",
|
||||
"selenium-server": "^3.0.1",
|
||||
"semver": "^5.3.0",
|
||||
"sinon": "^4.0.2",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"style-loader": "^0.18.2",
|
||||
"stylelint": "^8.1.1",
|
||||
"stylelint-config-standard": "^17.0.0",
|
||||
"vue-loader": "^13.0.5",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-template-compiler": "^2.5.13",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-dev-server": "^2.8.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"add-dom-event-listener": "^1.0.2",
|
||||
"css-animation": "^1.4.1",
|
||||
"dom-align": "^1.6.7",
|
||||
"dom-scroll-into-view": "^1.2.1",
|
||||
"eslint-plugin-vue": "^3.13.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.isplainobject": "^4.0.6",
|
||||
"omit.js": "^1.0.0",
|
||||
"vue": "^2.5.13",
|
||||
"vue-types": "^1.0.2",
|
||||
"warning": "^3.0.0"
|
||||
}
|
||||
}
|
||||
"name": "vue-ant-design",
|
||||
"version": "1.0.0",
|
||||
"description": "vue component",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"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"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vueComponent/ant-design.git"
|
||||
},
|
||||
"keywords": [
|
||||
"vue"
|
||||
],
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/vueComponent/ant-design/issues"
|
||||
},
|
||||
"homepage": "https://github.com/vueComponent/ant-design#readme",
|
||||
"pre-commit": [
|
||||
"lint",
|
||||
"lint:style"
|
||||
],
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-eslint": "^8.0.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.2",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-istanbul": "^4.1.1",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"chai": "^4.1.2",
|
||||
"css-loader": "^0.28.7",
|
||||
"eslint": "^4.7.2",
|
||||
"eslint-plugin-html": "^3.2.2",
|
||||
"eslint-plugin-vue-libs": "^1.2.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"istanbul-instrumenter-loader": "^3.0.0",
|
||||
"karma": "^1.4.1",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-coverage-istanbul-reporter": "^1.3.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.2",
|
||||
"karma-phantomjs-shim": "^1.4.0",
|
||||
"karma-sinon-chai": "^1.3.1",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.31",
|
||||
"karma-webpack": "^2.0.2",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^4.0.5",
|
||||
"marked": "^0.3.7",
|
||||
"mocha": "^3.2.0",
|
||||
"pre-commit": "^1.2.2",
|
||||
"selenium-server": "^3.0.1",
|
||||
"semver": "^5.3.0",
|
||||
"sinon": "^4.0.2",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"style-loader": "^0.18.2",
|
||||
"stylelint": "^8.1.1",
|
||||
"stylelint-config-standard": "^17.0.0",
|
||||
"vue-loader": "^13.0.5",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-template-compiler": "^2.5.13",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-dev-server": "^2.8.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"add-dom-event-listener": "^1.0.2",
|
||||
"css-animation": "^1.4.1",
|
||||
"dom-align": "^1.6.7",
|
||||
"dom-scroll-into-view": "^1.2.1",
|
||||
"eslint-plugin-vue": "^3.13.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.isplainobject": "^4.0.6",
|
||||
"omit.js": "^1.0.0",
|
||||
"vue": "^2.5.13",
|
||||
"vue-types": "^1.0.2",
|
||||
"warning": "^3.0.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue