From 130ea92a197b5d3dae68f1d03aa51500a5afdf7a Mon Sep 17 00:00:00 2001
From: huanghong <huanghong1125@126.com>
Date: Thu, 15 Mar 2018 00:07:11 +0800
Subject: [PATCH] update popper.js fix #1990

---
 examples/routers/select.vue        | 27 +++++++++++++++++++
 package-lock.json                  | 20 +++++++++-----
 package.json                       |  2 +-
 src/components/base/popper.js      | 43 ++++++++++++++----------------
 src/components/select/dropdown.vue | 22 +++++----------
 5 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index cb285c84..6beda00f 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/select.vue
@@ -698,6 +698,33 @@
         <Select v-model="model10" multiple style="width:260px">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
+        
+        <br><br>
+        
+        <br><br>
+        
+        <br><br>
+        <br><br>
+        <br><br>
+        <br><br>
+        <br><br>
+        <br><br>
+        <Select v-model="model10" multiple style="width:260px">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+        <br><br>
+        
+        <br><br>
+        
+        <br><br>
+        <br><br>
+        <br><br>
+        <br><br>
+        <br><br>
+        <br><br>
+        <Select v-model="model10" multiple style="width:260px">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
     </div>
 </template>
 <script>
diff --git a/package-lock.json b/package-lock.json
index 61f36594..4aa720ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -10393,9 +10393,9 @@
       "dev": true
     },
     "popper.js": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-0.6.4.tgz",
-      "integrity": "sha1-GDfEdgr1TSuyC2b5wJuSmT2Exik="
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.1.tgz",
+      "integrity": "sha1-uIFeXNpvYvwgQuR2GGSfdYZuZ1M="
     },
     "portfinder": {
       "version": "1.0.13",
@@ -14027,8 +14027,7 @@
     "vue": {
       "version": "2.5.16",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz",
-      "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ==",
-      "dev": true
+      "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ=="
     },
     "vue-hot-reload-api": {
       "version": "2.3.0",
@@ -14228,6 +14227,15 @@
         }
       }
     },
+    "vue-popperjs": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/vue-popperjs/-/vue-popperjs-1.2.6.tgz",
+      "integrity": "sha512-0SEPDdQY8NxRcDiWXTgW6nMpRcc+rSpcELsLszuPzehBqQ5/9AGAr2OGKh1smwcaRe8Rb1CtE399vNz9+jYorw==",
+      "requires": {
+        "popper.js": "1.14.1",
+        "vue": "2.5.16"
+      }
+    },
     "vue-router": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
diff --git a/package.json b/package.json
index c101a901..e4829cc8 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "element-resize-detector": "^1.1.14",
     "js-calendar": "^1.2.3",
     "lodash.throttle": "^4.1.1",
-    "popper.js": "^0.6.4",
+    "popper.js": "^1.14.1",
     "tinycolor2": "^1.4.1"
   },
   "peerDependencies": {
diff --git a/src/components/base/popper.js b/src/components/base/popper.js
index f0eb6877..294c792e 100644
--- a/src/components/base/popper.js
+++ b/src/components/base/popper.js
@@ -3,7 +3,8 @@
  * */
 import Vue from 'vue';
 const isServer = Vue.prototype.$isServer;
-const Popper = isServer ? function() {} : require('popper.js');  // eslint-disable-line
+// const Popper = isServer ? function() {} : require('popper.js');  // eslint-disable-line
+import Popper from 'popper.js';
 
 export default {
     props: {
@@ -29,8 +30,11 @@ export default {
             type: Object,
             default () {
                 return {
-                    gpuAcceleration: false,
-                    boundariesElement: 'body'    // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证(还是有问题的)
+                    modifiers: {
+                        computeStyle:{
+                            gpuAcceleration: false,
+                        }
+                    }
                 };
             }
         },
@@ -57,7 +61,6 @@ export default {
                 this.updatePopper();
                 this.$emit('on-popper-show');
             } else {
-                this.destroyPopper();
                 this.$emit('on-popper-hide');
             }
             this.$emit('input', val);
@@ -81,14 +84,21 @@ export default {
             }
 
             options.placement = this.placement;
-            options.offset = this.offset;
-
-            this.popperJS = new Popper(reference, popper, options);
-            this.popperJS.onCreate(popper => {
-                this.resetTransformOrigin(popper);
+            
+            if (options.modifiers) {
+                options.modifiers = {};
+            }
+            if (options.modifiers.offset) {
+                options.modifiers.offset = {};
+            }
+            options.modifiers.offset = this.offset;
+            options.onCreate =()=>{
                 this.$nextTick(this.updatePopper);
                 this.$emit('created', this);
-            });
+            };
+
+            this.popperJS = new Popper(reference, popper, options);
+            
         },
         updatePopper() {
             if (isServer) return;
@@ -99,19 +109,6 @@ export default {
             if (this.visible) return;
             this.popperJS.destroy();
             this.popperJS = null;
-        },
-        destroyPopper() {
-            if (isServer) return;
-            if (this.popperJS) {
-                this.resetTransformOrigin(this.popperJS);
-            }
-        },
-        resetTransformOrigin(popper) {
-            if (isServer) return;
-            let placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'};
-            let placement = popper._popper.getAttribute('x-placement').split('-')[0];
-            let origin = placementMap[placement];
-            popper._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
         }
     },
     beforeDestroy() {
diff --git a/src/components/select/dropdown.vue b/src/components/select/dropdown.vue
index 26381198..fd9e9881 100644
--- a/src/components/select/dropdown.vue
+++ b/src/components/select/dropdown.vue
@@ -5,7 +5,8 @@
     import Vue from 'vue';
     const isServer = Vue.prototype.$isServer;
     import { getStyle } from '../../utils/assist';
-    const Popper = isServer ? function() {} : require('popper.js');  // eslint-disable-line
+    // const Popper = isServer ? function() {} : require('popper.js');  // eslint-disable-line
+    import Popper from 'popper.js';
 
     export default {
         name: 'Drop',
@@ -41,14 +42,12 @@
                 } else {
                     this.$nextTick(() => {
                         this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
-                            gpuAcceleration: false,
                             placement: this.placement,
-                            boundariesPadding: 0,
-                            forceAbsolute: true,
-                            boundariesElement: 'body'
-                        });
-                        this.popper.onCreate(popper => {
-                            this.resetTransformOrigin(popper);
+                            modifiers: {
+                                computeStyle:{
+                                    gpuAcceleration: false,
+                                }
+                            }
                         });
                     });
                 }
@@ -59,7 +58,6 @@
             },
             destroy () {
                 if (this.popper) {
-                    this.resetTransformOrigin(this.popper);
                     setTimeout(() => {
                         if (this.popper) {
                             this.popper.destroy();
@@ -67,12 +65,6 @@
                         }
                     }, 300);
                 }
-            },
-            resetTransformOrigin(popper) {
-                let placementMap = {top: 'bottom', bottom: 'top'};
-                let placement = popper._popper.getAttribute('x-placement').split('-')[0];
-                let origin = placementMap[placement];
-                popper._popper.style.transformOrigin = `center ${ origin }`;
             }
         },
         created () {