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

119
components/trigger/index.vue
View File

@ -1,4 +1,5 @@
<script> <script>
import Vue from 'vue'
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 } from '../_util/props-util' import { hasProp, getComponentFromProp } from '../_util/props-util'
@ -78,7 +79,6 @@ export default {
beforeCreate () { beforeCreate () {
ALL_HANDLERS.forEach((h) => { ALL_HANDLERS.forEach((h) => {
this[`fire${h}`] = (e) => { this[`fire${h}`] = (e) => {
// const ev = `on${h[0].toUpperCase() + h.slice(1)}`
this.fireEvents(h, e) this.fireEvents(h, e)
} }
}) })
@ -107,6 +107,10 @@ export default {
beforeDestroy () { beforeDestroy () {
this.clearDelayTimer() this.clearDelayTimer()
this.clearOutsideHandler() this.clearOutsideHandler()
if (this._component) {
this._component.$destroy()
this._component = null
}
}, },
methods: { methods: {
updatedCal () { updatedCal () {
@ -163,9 +167,9 @@ export default {
onPopupMouseleave (e) { onPopupMouseleave (e) {
if (e.relatedTarget && !e.relatedTarget.setTimeout && if (e.relatedTarget && !e.relatedTarget.setTimeout &&
this.$refs.popup && this._component.$refs.popup &&
this.$refs.popup.getPopupDomNode && this._component.$refs.popup.getPopupDomNode &&
contains(this.$refs.popup.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)
@ -252,9 +256,8 @@ export default {
} }
}, },
getPopupDomNode () { getPopupDomNode () {
// for test if (this._component.$refs.popup && this._component.$refs.popup.getPopupDomNode) {
if (this.$refs.popup && this.$refs.popup.getPopupDomNode) { return this._component.$refs.popup.getPopupDomNode()
return this.$refs.popup.getPopupDomNode()
} }
return null return null
}, },
@ -285,52 +288,71 @@ export default {
} }
return popupAlign return popupAlign
}, },
getComponent (h) { renderComponent () {
const self = this
const mouseProps = {} const mouseProps = {}
if (this.isMouseEnterToShow()) { if (this.isMouseEnterToShow()) {
mouseProps.mouseenter = this.onPopupMouseenter mouseProps.mouseenter = self.onPopupMouseenter
} }
if (this.isMouseLeaveToHide()) { if (this.isMouseLeaveToHide()) {
mouseProps.mouseleave = this.onPopupMouseleave mouseProps.mouseleave = self.onPopupMouseleave
} }
const { prefixCls, destroyPopupOnHide, sPopupVisible, const { prefixCls, destroyPopupOnHide, sPopupVisible,
popupStyle, popupClassName, action, popupStyle, popupClassName, action,
popupAnimation, handleGetPopupClassFromAlign, getRootDomNode, popupAnimation, handleGetPopupClassFromAlign, getRootDomNode,
mask, zIndex, popupTransitionName, getPopupAlign, mask, zIndex, popupTransitionName, getPopupAlign,
maskAnimation, maskTransitionName, getContainer } = this maskAnimation, maskTransitionName, getContainer } = self
const popupProps = { const popupProps = {
props: { prefixCls,
prefixCls, destroyPopupOnHide,
destroyPopupOnHide, visible: sPopupVisible,
visible: sPopupVisible, action,
action, align: getPopupAlign(),
align: getPopupAlign(), animation: popupAnimation,
animation: popupAnimation, getClassNameFromAlign: handleGetPopupClassFromAlign,
getClassNameFromAlign: handleGetPopupClassFromAlign, getRootDomNode,
getRootDomNode, mask,
mask, zIndex,
zIndex, transitionName: popupTransitionName,
transitionName: popupTransitionName, maskAnimation,
maskAnimation, maskTransitionName,
maskTransitionName, getContainer,
getContainer, popupClassName,
popupClassName, popupStyle,
}, popupEvents: {
on: { align: self.$listeners.popupAlign || noop,
align: this.$listeners.popupAlign || noop,
...mouseProps, ...mouseProps,
}, },
ref: 'popup',
style: popupStyle,
key: '_ANT_PORTAL',
} }
return (
<Popup if (!this._component) {
{...popupProps} const div = document.createElement('div')
> this._component = new Vue({
{getComponentFromProp(this, 'popup')} props: {
</Popup> },
) 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 () { getContainer () {
@ -441,8 +463,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.$refs.popup && this.$refs.popup.$refs.alignInstance) { if (this.$data.sPopupVisible && this._component.$refs.popup && this._component.$refs.popup.$refs.alignInstance) {
this.$refs.popup.$refs.alignInstance.forceAlign() this._component.$refs.popup.$refs.alignInstance.forceAlign()
} }
}, },
fireEvents (type, e) { fireEvents (type, e) {
@ -508,18 +530,7 @@ export default {
} }
const { sPopupVisible, forceRender } = this const { sPopupVisible, forceRender } = this
if (sPopupVisible || forceRender || this._component) { if (sPopupVisible || forceRender || this._component) {
this._component = this.getComponent(h) this.renderComponent(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)
} }
const trigger = cloneElement(child, newChildProps) const trigger = cloneElement(child, newChildProps)
return trigger return trigger

180
package.json
View File

@ -1,91 +1,91 @@
{ {
"name": "vue-ant-design", "name": "vue-ant-design",
"version": "1.0.0", "version": "1.0.0",
"description": "vue component", "description": "vue component",
"main": "index.js", "main": "index.js",
"scripts": { "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", "test": "karma start test/karma.conf.js --single-run",
"lint": "eslint -c ./.eslintrc --fix --ext .js ./src/", "lint": "eslint -c ./.eslintrc --fix --ext .js ./src/",
"lint:style": "stylelint \"./src/**/*.less\" --syntax less" "lint:style": "stylelint \"./src/**/*.less\" --syntax less"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/vueComponent/ant-design.git" "url": "git+https://github.com/vueComponent/ant-design.git"
}, },
"keywords": [ "keywords": [
"vue" "vue"
], ],
"author": "", "author": "",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/vueComponent/ant-design/issues" "url": "https://github.com/vueComponent/ant-design/issues"
}, },
"homepage": "https://github.com/vueComponent/ant-design#readme", "homepage": "https://github.com/vueComponent/ant-design#readme",
"pre-commit": [ "pre-commit": [
"lint", "lint",
"lint:style" "lint:style"
], ],
"devDependencies": { "devDependencies": {
"babel-cli": "^6.26.0", "babel-cli": "^6.26.0",
"babel-eslint": "^8.0.1", "babel-eslint": "^8.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.2", "babel-helper-vue-jsx-merge-props": "^2.0.2",
"babel-loader": "^7.1.2", "babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.1", "babel-plugin-istanbul": "^4.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-vue-jsx": "^3.5.0", "babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0", "babel-preset-env": "^1.6.0",
"chai": "^4.1.2", "chai": "^4.1.2",
"css-loader": "^0.28.7", "css-loader": "^0.28.7",
"eslint": "^4.7.2", "eslint": "^4.7.2",
"eslint-plugin-html": "^3.2.2", "eslint-plugin-html": "^3.2.2",
"eslint-plugin-vue-libs": "^1.2.1", "eslint-plugin-vue-libs": "^1.2.1",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^2.30.1",
"istanbul-instrumenter-loader": "^3.0.0", "istanbul-instrumenter-loader": "^3.0.0",
"karma": "^1.4.1", "karma": "^1.4.1",
"karma-coverage": "^1.1.1", "karma-coverage": "^1.1.1",
"karma-coverage-istanbul-reporter": "^1.3.0", "karma-coverage-istanbul-reporter": "^1.3.0",
"karma-mocha": "^1.3.0", "karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2", "karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0", "karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1", "karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7", "karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31", "karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2", "karma-webpack": "^2.0.2",
"less": "^2.7.2", "less": "^2.7.2",
"less-loader": "^4.0.5", "less-loader": "^4.0.5",
"marked": "^0.3.7", "marked": "^0.3.7",
"mocha": "^3.2.0", "mocha": "^3.2.0",
"pre-commit": "^1.2.2", "pre-commit": "^1.2.2",
"selenium-server": "^3.0.1", "selenium-server": "^3.0.1",
"semver": "^5.3.0", "semver": "^5.3.0",
"sinon": "^4.0.2", "sinon": "^4.0.2",
"sinon-chai": "^2.8.0", "sinon-chai": "^2.8.0",
"style-loader": "^0.18.2", "style-loader": "^0.18.2",
"stylelint": "^8.1.1", "stylelint": "^8.1.1",
"stylelint-config-standard": "^17.0.0", "stylelint-config-standard": "^17.0.0",
"vue-loader": "^13.0.5", "vue-loader": "^13.0.5",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13", "vue-template-compiler": "^2.5.13",
"webpack": "^3.6.0", "webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2" "webpack-dev-server": "^2.8.2"
}, },
"dependencies": { "dependencies": {
"add-dom-event-listener": "^1.0.2", "add-dom-event-listener": "^1.0.2",
"css-animation": "^1.4.1", "css-animation": "^1.4.1",
"dom-align": "^1.6.7", "dom-align": "^1.6.7",
"dom-scroll-into-view": "^1.2.1", "dom-scroll-into-view": "^1.2.1",
"eslint-plugin-vue": "^3.13.0", "eslint-plugin-vue": "^3.13.0",
"lodash.clonedeep": "^4.5.0", "lodash.clonedeep": "^4.5.0",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.isequal": "^4.5.0", "lodash.isequal": "^4.5.0",
"lodash.isplainobject": "^4.0.6", "lodash.isplainobject": "^4.0.6",
"omit.js": "^1.0.0", "omit.js": "^1.0.0",
"vue": "^2.5.13", "vue": "^2.5.13",
"vue-types": "^1.0.2", "vue-types": "^1.0.2",
"warning": "^3.0.0" "warning": "^3.0.0"
} }
} }