Merge pull request #3156 from huanghong1125/2.0

Select、Dropdown、DatePicker等浮层placement自适应

examples/routers/cascader.vue

@@ -1,5 +1,11 @@
 <template>
+    <div>
         <Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
+        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        <Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
+        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        <Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
+    </div>
 </template>
 <script>
     export default {

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>

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",
+      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-0.6.4.tgz",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.1.tgz",
-      "integrity": "sha1-GDfEdgr1TSuyC2b5wJuSmT2Exik="
+      "integrity": "sha1-uIFeXNpvYvwgQuR2GGSfdYZuZ1M="
     },
     "portfinder": {
       "version": "1.0.13",

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": {

src/components/base/popper.js

@@ -3,7 +3,7 @@
  * */
 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/dist/umd/popper.js');  // eslint-disable-line
 
 export default {
     props: {
@@ -29,8 +29,11 @@ export default {
             type: Object,
             default () {
                 return {
+                    modifiers: {
+                        computeStyle:{
                             gpuAcceleration: false,
-                    boundariesElement: 'body'    // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证(还是有问题的)
+                        }
+                    }
                 };
             }
         },
@@ -57,7 +60,6 @@ export default {
                 this.updatePopper();
                 this.$emit('on-popper-show');
             } else {
-                this.destroyPopper();
                 this.$emit('on-popper-hide');
             }
             this.$emit('input', val);
@@ -81,14 +83,21 @@ export default {
             }
 
             options.placement = this.placement;
-            options.offset = this.offset;
             
-            this.popperJS = new Popper(reference, popper, options);
+            if (options.modifiers) {
-            this.popperJS.onCreate(popper => {
+                options.modifiers = {};
-                this.resetTransformOrigin(popper);
+            }
+            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 +108,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() {

src/components/cascader/cascader.vue

@@ -357,6 +357,7 @@
                     if (this.transfer) {
                         this.$refs.drop.update();
                     }
+                    this.broadcast('Drop', 'on-update-popper');
                 } else {
                     if (this.filterable) {
                         this.query = '';
@@ -365,6 +366,7 @@
                     if (this.transfer) {
                         this.$refs.drop.destroy();
                     }
+                    this.broadcast('Drop', 'on-destroy-popper');
                 }
                 this.$emit('on-visible-change', val);
             },

src/components/select/dropdown.vue

@@ -5,7 +5,7 @@
     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/dist/umd/popper.js');  // eslint-disable-line
 
     export default {
         name: 'Drop',
@@ -41,14 +41,12 @@
                 } else {
                     this.$nextTick(() => {
                         this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
-                            gpuAcceleration: false,
                             placement: this.placement,
-                            boundariesPadding: 0,
+                            modifiers: {
-                            forceAbsolute: true,
+                                computeStyle:{
-                            boundariesElement: 'body'
+                                    gpuAcceleration: false,
-                        });
+                                }
-                        this.popper.onCreate(popper => {
+                            }
-                            this.resetTransformOrigin(popper);
                         });
                     });
                 }
@@ -59,7 +57,6 @@
             },
             destroy () {
                 if (this.popper) {
-                    this.resetTransformOrigin(this.popper);
                     setTimeout(() => {
                         if (this.popper) {
                             this.popper.destroy();
@@ -67,12 +64,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 () {