chenhaodong / mew-iview

Commit 130ea92a197b5d3dae68f1d03aa51500a5afdf7a

Authored by huanghong
1 parent 44420acb

update popper.js 

fix #1990
Showing 5 changed files with 69 additions and 45 deletions   Show diff stats
Inline Side-by-side
examples/routers/select.vue
  Show/Hide comments   View file @130ea92
... ... @@ -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 @130ea92
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",
... ... @@ -14027,8 +14027,7 @@
14027 14027 "vue": {
14028 14028 "version": "2.5.16",
14029 14029 "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz",
14030   - "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ==",
14031   - "dev": true
  14030 + "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ=="
14032 14031 },
14033 14032 "vue-hot-reload-api": {
14034 14033 "version": "2.3.0",
... ... @@ -14228,6 +14227,15 @@
14228 14227 }
14229 14228 }
14230 14229 },
  14230 + "vue-popperjs": {
  14231 + "version": "1.2.6",
  14232 + "resolved": "https://registry.npmjs.org/vue-popperjs/-/vue-popperjs-1.2.6.tgz",
  14233 + "integrity": "sha512-0SEPDdQY8NxRcDiWXTgW6nMpRcc+rSpcELsLszuPzehBqQ5/9AGAr2OGKh1smwcaRe8Rb1CtE399vNz9+jYorw==",
  14234 + "requires": {
  14235 + "popper.js": "1.14.1",
  14236 + "vue": "2.5.16"
  14237 + }
  14238 + },
14231 14239 "vue-router": {
14232 14240 "version": "3.0.1",
14233 14241 "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
... ...
package.json
  Show/Hide comments   View file @130ea92
... ... @@ -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 @130ea92
... ... @@ -3,7 +3,8 @@
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'); // eslint-disable-line
  7 +import Popper from 'popper.js';
7 8  
8 9 export default {
9 10 props: {
... ... @@ -29,8 +30,11 @@ export default {
29 30 type: Object,
30 31 default () {
31 32 return {
32   - gpuAcceleration: false,
33   - boundariesElement: 'body' // todo ๆš‚ๆ—ถๆณจ้‡Š๏ผŒๅ‘็Žฐๅœจ vue 2 ้‡Œๆ–นๅ‘ๆš‚ๆ—ถๅฏไปฅ่‡ชๅŠจ่ฏ†ๅˆซไบ†๏ผŒๅพ…้ชŒ่ฏ(่ฟ˜ๆ˜ฏๆœ‰้—ฎ้ข˜็š„)
  33 + modifiers: {
  34 + computeStyle:{
  35 + gpuAcceleration: false,
  36 + }
  37 + }
34 38 };
35 39 }
36 40 },
... ... @@ -57,7 +61,6 @@ export default {
57 61 this.updatePopper();
58 62 this.$emit('on-popper-show');
59 63 } else {
60   - this.destroyPopper();
61 64 this.$emit('on-popper-hide');
62 65 }
63 66 this.$emit('input', val);
... ... @@ -81,14 +84,21 @@ export default {
81 84 }
82 85  
83 86 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);
  87 +
  88 + if (options.modifiers) {
  89 + options.modifiers = {};
  90 + }
  91 + if (options.modifiers.offset) {
  92 + options.modifiers.offset = {};
  93 + }
  94 + options.modifiers.offset = this.offset;
  95 + options.onCreate =()=>{
89 96 this.$nextTick(this.updatePopper);
90 97 this.$emit('created', this);
91   - });
  98 + };
  99 +
  100 + this.popperJS = new Popper(reference, popper, options);
  101 +
92 102 },
93 103 updatePopper() {
94 104 if (isServer) return;
... ... @@ -99,19 +109,6 @@ export default {
99 109 if (this.visible) return;
100 110 this.popperJS.destroy();
101 111 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 112 }
116 113 },
117 114 beforeDestroy() {
... ...
src/components/select/dropdown.vue
  Show/Hide comments   View file @130ea92
... ... @@ -5,7 +5,8 @@
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'); // eslint-disable-line
  9 + import Popper from 'popper.js';
9 10  
10 11 export default {
11 12 name: 'Drop',
... ... @@ -41,14 +42,12 @@
41 42 } else {
42 43 this.$nextTick(() => {
43 44 this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
44   - gpuAcceleration: false,
45 45 placement: this.placement,
46   - boundariesPadding: 0,
47   - forceAbsolute: true,
48   - boundariesElement: 'body'
49   - });
50   - this.popper.onCreate(popper => {
51   - this.resetTransformOrigin(popper);
  46 + modifiers: {
  47 + computeStyle:{
  48 + gpuAcceleration: false,
  49 + }
  50 + }
52 51 });
53 52 });
54 53 }
... ... @@ -59,7 +58,6 @@
59 58 },
60 59 destroy () {
61 60 if (this.popper) {
62   - this.resetTransformOrigin(this.popper);
63 61 setTimeout(() => {
64 62 if (this.popper) {
65 63 this.popper.destroy();
... ... @@ -67,12 +65,6 @@
67 65 }
68 66 }, 300);
69 67 }
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 68 }
77 69 },
78 70 created () {
... ...