chenhaodong / mew-iview

Commit a7262dbeab817eec175960c79e12e3cdc5121869

Authored by Aresn
Committed by GitHub
2 parents 44420acb a237e5bd

Merge pull request #3156 from huanghong1125/2.0 

Select、Dropdown、DatePicker等浮层placement自适应
Showing 7 changed files with 66 additions and 44 deletions   Show diff stats
Inline Side-by-side
examples/routers/cascader.vue
  Show/Hide comments   View file @a7262db
1 <template> 1 <template>
2 - <Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader> 2 + <div>
  3 + <Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
  4 + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  5 + <Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
  6 + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  7 + <Cascader v-model="value3" :data="data" filterable style="width: 400px"></Cascader>
  8 + </div>
3 </template> 9 </template>
4 <script> 10 <script>
5 export default { 11 export default {
examples/routers/select.vue
  Show/Hide comments   View file @a7262db
@@ -698,6 +698,33 @@ @@ -698,6 +698,33 @@
698 <Select v-model="model10" multiple style="width:260px"> 698 <Select v-model="model10" multiple style="width:260px">
699 <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> 699 <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
700 </Select> 700 </Select>
  701 +
  702 + <br><br>
  703 +
  704 + <br><br>
  705 +
  706 + <br><br>
  707 + <br><br>
  708 + <br><br>
  709 + <br><br>
  710 + <br><br>
  711 + <br><br>
  712 + <Select v-model="model10" multiple style="width:260px">
  713 + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
  714 + </Select>
  715 + <br><br>
  716 +
  717 + <br><br>
  718 +
  719 + <br><br>
  720 + <br><br>
  721 + <br><br>
  722 + <br><br>
  723 + <br><br>
  724 + <br><br>
  725 + <Select v-model="model10" multiple style="width:260px">
  726 + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
  727 + </Select>
701 </div> 728 </div>
702 </template> 729 </template>
703 <script> 730 <script>
1 { 1 {
2 "name": "iview", 2 "name": "iview",
3 - "version": "2.10.1", 3 + "version": "2.11.0",
4 "lockfileVersion": 1, 4 "lockfileVersion": 1,
5 "requires": true, 5 "requires": true,
6 "dependencies": { 6 "dependencies": {
@@ -10393,9 +10393,9 @@ @@ -10393,9 +10393,9 @@
10393 "dev": true 10393 "dev": true
10394 }, 10394 },
10395 "popper.js": { 10395 "popper.js": {
10396 - "version": "0.6.4",  
10397 - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-0.6.4.tgz",  
10398 - "integrity": "sha1-GDfEdgr1TSuyC2b5wJuSmT2Exik=" 10396 + "version": "1.14.1",
  10397 + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.1.tgz",
  10398 + "integrity": "sha1-uIFeXNpvYvwgQuR2GGSfdYZuZ1M="
10399 }, 10399 },
10400 "portfinder": { 10400 "portfinder": {
10401 "version": "1.0.13", 10401 "version": "1.0.13",
@@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
45 "element-resize-detector": "^1.1.14", 45 "element-resize-detector": "^1.1.14",
46 "js-calendar": "^1.2.3", 46 "js-calendar": "^1.2.3",
47 "lodash.throttle": "^4.1.1", 47 "lodash.throttle": "^4.1.1",
48 - "popper.js": "^0.6.4", 48 + "popper.js": "^1.14.1",
49 "tinycolor2": "^1.4.1" 49 "tinycolor2": "^1.4.1"
50 }, 50 },
51 "peerDependencies": { 51 "peerDependencies": {
src/components/base/popper.js
  Show/Hide comments   View file @a7262db
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 * */ 3 * */
4 import Vue from 'vue'; 4 import Vue from 'vue';
5 const isServer = Vue.prototype.$isServer; 5 const isServer = Vue.prototype.$isServer;
6 -const Popper = isServer ? function() {} : require('popper.js'); // eslint-disable-line 6 +const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js'); // eslint-disable-line
7 7
8 export default { 8 export default {
9 props: { 9 props: {
@@ -29,8 +29,11 @@ export default { @@ -29,8 +29,11 @@ export default {
29 type: Object, 29 type: Object,
30 default () { 30 default () {
31 return { 31 return {
32 - gpuAcceleration: false,  
33 - boundariesElement: 'body' // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证(还是有问题的) 32 + modifiers: {
  33 + computeStyle:{
  34 + gpuAcceleration: false,
  35 + }
  36 + }
34 }; 37 };
35 } 38 }
36 }, 39 },
@@ -57,7 +60,6 @@ export default { @@ -57,7 +60,6 @@ export default {
57 this.updatePopper(); 60 this.updatePopper();
58 this.$emit('on-popper-show'); 61 this.$emit('on-popper-show');
59 } else { 62 } else {
60 - this.destroyPopper();  
61 this.$emit('on-popper-hide'); 63 this.$emit('on-popper-hide');
62 } 64 }
63 this.$emit('input', val); 65 this.$emit('input', val);
@@ -81,14 +83,21 @@ export default { @@ -81,14 +83,21 @@ export default {
81 } 83 }
82 84
83 options.placement = this.placement; 85 options.placement = this.placement;
84 - options.offset = this.offset;  
85 -  
86 - this.popperJS = new Popper(reference, popper, options);  
87 - this.popperJS.onCreate(popper => {  
88 - this.resetTransformOrigin(popper); 86 +
  87 + if (options.modifiers) {
  88 + options.modifiers = {};
  89 + }
  90 + if (options.modifiers.offset) {
  91 + options.modifiers.offset = {};
  92 + }
  93 + options.modifiers.offset = this.offset;
  94 + options.onCreate =()=>{
89 this.$nextTick(this.updatePopper); 95 this.$nextTick(this.updatePopper);
90 this.$emit('created', this); 96 this.$emit('created', this);
91 - }); 97 + };
  98 +
  99 + this.popperJS = new Popper(reference, popper, options);
  100 +
92 }, 101 },
93 updatePopper() { 102 updatePopper() {
94 if (isServer) return; 103 if (isServer) return;
@@ -99,19 +108,6 @@ export default { @@ -99,19 +108,6 @@ export default {
99 if (this.visible) return; 108 if (this.visible) return;
100 this.popperJS.destroy(); 109 this.popperJS.destroy();
101 this.popperJS = null; 110 this.popperJS = null;
102 - },  
103 - destroyPopper() {  
104 - if (isServer) return;  
105 - if (this.popperJS) {  
106 - this.resetTransformOrigin(this.popperJS);  
107 - }  
108 - },  
109 - resetTransformOrigin(popper) {  
110 - if (isServer) return;  
111 - let placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'};  
112 - let placement = popper._popper.getAttribute('x-placement').split('-')[0];  
113 - let origin = placementMap[placement];  
114 - popper._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;  
115 } 111 }
116 }, 112 },
117 beforeDestroy() { 113 beforeDestroy() {
src/components/cascader/cascader.vue
  Show/Hide comments   View file @a7262db
@@ -357,6 +357,7 @@ @@ -357,6 +357,7 @@
357 if (this.transfer) { 357 if (this.transfer) {
358 this.$refs.drop.update(); 358 this.$refs.drop.update();
359 } 359 }
  360 + this.broadcast('Drop', 'on-update-popper');
360 } else { 361 } else {
361 if (this.filterable) { 362 if (this.filterable) {
362 this.query = ''; 363 this.query = '';
@@ -365,6 +366,7 @@ @@ -365,6 +366,7 @@
365 if (this.transfer) { 366 if (this.transfer) {
366 this.$refs.drop.destroy(); 367 this.$refs.drop.destroy();
367 } 368 }
  369 + this.broadcast('Drop', 'on-destroy-popper');
368 } 370 }
369 this.$emit('on-visible-change', val); 371 this.$emit('on-visible-change', val);
370 }, 372 },
src/components/select/dropdown.vue
  Show/Hide comments   View file @a7262db
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 import Vue from 'vue'; 5 import Vue from 'vue';
6 const isServer = Vue.prototype.$isServer; 6 const isServer = Vue.prototype.$isServer;
7 import { getStyle } from '../../utils/assist'; 7 import { getStyle } from '../../utils/assist';
8 - const Popper = isServer ? function() {} : require('popper.js'); // eslint-disable-line 8 + const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js'); // eslint-disable-line
9 9
10 export default { 10 export default {
11 name: 'Drop', 11 name: 'Drop',
@@ -41,14 +41,12 @@ @@ -41,14 +41,12 @@
41 } else { 41 } else {
42 this.$nextTick(() => { 42 this.$nextTick(() => {
43 this.popper = new Popper(this.$parent.$refs.reference, this.$el, { 43 this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
44 - gpuAcceleration: false,  
45 placement: this.placement, 44 placement: this.placement,
46 - boundariesPadding: 0,  
47 - forceAbsolute: true,  
48 - boundariesElement: 'body'  
49 - });  
50 - this.popper.onCreate(popper => {  
51 - this.resetTransformOrigin(popper); 45 + modifiers: {
  46 + computeStyle:{
  47 + gpuAcceleration: false,
  48 + }
  49 + }
52 }); 50 });
53 }); 51 });
54 } 52 }
@@ -59,7 +57,6 @@ @@ -59,7 +57,6 @@
59 }, 57 },
60 destroy () { 58 destroy () {
61 if (this.popper) { 59 if (this.popper) {
62 - this.resetTransformOrigin(this.popper);  
63 setTimeout(() => { 60 setTimeout(() => {
64 if (this.popper) { 61 if (this.popper) {
65 this.popper.destroy(); 62 this.popper.destroy();
@@ -67,12 +64,6 @@ @@ -67,12 +64,6 @@
67 } 64 }
68 }, 300); 65 }, 300);
69 } 66 }
70 - },  
71 - resetTransformOrigin(popper) {  
72 - let placementMap = {top: 'bottom', bottom: 'top'};  
73 - let placement = popper._popper.getAttribute('x-placement').split('-')[0];  
74 - let origin = placementMap[placement];  
75 - popper._popper.style.transformOrigin = `center ${ origin }`;  
76 } 67 }
77 }, 68 },
78 created () { 69 created () {