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 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 9 </template>
4 10 <script>
5 11 export default {
... ...
examples/routers/select.vue
  Show/Hide comments   View file @a7262db
... ... @@ -698,6 +698,33 @@
698 698 <Select v-model="model10" multiple style="width:260px">
699 699 <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
700 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 728 </div>
702 729 </template>
703 730 <script>
... ...
package-lock.json
  Show/Hide comments   View file @a7262db
1 1 {
2 2 "name": "iview",
3   - "version": "2.10.1",
  3 + "version": "2.11.0",
4 4 "lockfileVersion": 1,
5 5 "requires": true,
6 6 "dependencies": {
... ... @@ -10393,9 +10393,9 @@
10393 10393 "dev": true
10394 10394 },
10395 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 10400 "portfinder": {
10401 10401 "version": "1.0.13",
... ...
package.json
  Show/Hide comments   View file @a7262db
... ... @@ -45,7 +45,7 @@
45 45 "element-resize-detector": "^1.1.14",
46 46 "js-calendar": "^1.2.3",
47 47 "lodash.throttle": "^4.1.1",
48   - "popper.js": "^0.6.4",
  48 + "popper.js": "^1.14.1",
49 49 "tinycolor2": "^1.4.1"
50 50 },
51 51 "peerDependencies": {
... ...
src/components/base/popper.js
  Show/Hide comments   View file @a7262db
... ... @@ -3,7 +3,7 @@
3 3 * */
4 4 import Vue from 'vue';
5 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 8 export default {
9 9 props: {
... ... @@ -29,8 +29,11 @@ export default {
29 29 type: Object,
30 30 default () {
31 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 60 this.updatePopper();
58 61 this.$emit('on-popper-show');
59 62 } else {
60   - this.destroyPopper();
61 63 this.$emit('on-popper-hide');
62 64 }
63 65 this.$emit('input', val);
... ... @@ -81,14 +83,21 @@ export default {
81 83 }
82 84  
83 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 95 this.$nextTick(this.updatePopper);
90 96 this.$emit('created', this);
91   - });
  97 + };
  98 +
  99 + this.popperJS = new Popper(reference, popper, options);
  100 +
92 101 },
93 102 updatePopper() {
94 103 if (isServer) return;
... ... @@ -99,19 +108,6 @@ export default {
99 108 if (this.visible) return;
100 109 this.popperJS.destroy();
101 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 113 beforeDestroy() {
... ...
src/components/cascader/cascader.vue
  Show/Hide comments   View file @a7262db
... ... @@ -357,6 +357,7 @@
357 357 if (this.transfer) {
358 358 this.$refs.drop.update();
359 359 }
  360 + this.broadcast('Drop', 'on-update-popper');
360 361 } else {
361 362 if (this.filterable) {
362 363 this.query = '';
... ... @@ -365,6 +366,7 @@
365 366 if (this.transfer) {
366 367 this.$refs.drop.destroy();
367 368 }
  369 + this.broadcast('Drop', 'on-destroy-popper');
368 370 }
369 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 5 import Vue from 'vue';
6 6 const isServer = Vue.prototype.$isServer;
7 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 10 export default {
11 11 name: 'Drop',
... ... @@ -41,14 +41,12 @@
41 41 } else {
42 42 this.$nextTick(() => {
43 43 this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
44   - gpuAcceleration: false,
45 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 57 },
60 58 destroy () {
61 59 if (this.popper) {
62   - this.resetTransformOrigin(this.popper);
63 60 setTimeout(() => {
64 61 if (this.popper) {
65 62 this.popper.destroy();
... ... @@ -67,12 +64,6 @@
67 64 }
68 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 69 created () {
... ...