From f3c23a2bc1a214420d16d0b8e11d888aa0cd97fd Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Sat, 20 Jan 2018 20:24:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20trigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/trigger/Popup.vue |  19 ++--
 components/trigger/index.vue | 119 ++++++++++++-----------
 package.json                 | 180 +++++++++++++++++------------------
 3 files changed, 165 insertions(+), 153 deletions(-)

diff --git a/components/trigger/Popup.vue b/components/trigger/Popup.vue
index e5d329cdc..5eac33715 100644
--- a/components/trigger/Popup.vue
+++ b/components/trigger/Popup.vue
@@ -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) {
diff --git a/components/trigger/index.vue b/components/trigger/index.vue
index 8aeaecc1a..57cb3f2e2 100644
--- a/components/trigger/index.vue
+++ b/components/trigger/index.vue
@@ -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
diff --git a/package.json b/package.json
index 2c9ef6600..75dc1241a 100644
--- a/package.json
+++ b/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"
+    }
+}
\ No newline at end of file