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,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",
@@ -14027,8 +14027,7 @@ @@ -14027,8 +14027,7 @@
14027 "vue": { 14027 "vue": {
14028 "version": "2.5.16", 14028 "version": "2.5.16",
14029 "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz", 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 "vue-hot-reload-api": { 14032 "vue-hot-reload-api": {
14034 "version": "2.3.0", 14033 "version": "2.3.0",
@@ -14228,6 +14227,15 @@ @@ -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 "vue-router": { 14239 "vue-router": {
14232 "version": "3.0.1", 14240 "version": "3.0.1",
14233 "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz", 14241 "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
@@ -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 @130ea92
@@ -3,7 +3,8 @@ @@ -3,7 +3,8 @@
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'); // eslint-disable-line
  7 +import Popper from 'popper.js';
7 8
8 export default { 9 export default {
9 props: { 10 props: {
@@ -29,8 +30,11 @@ export default { @@ -29,8 +30,11 @@ export default {
29 type: Object, 30 type: Object,
30 default () { 31 default () {
31 return { 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,7 +61,6 @@ export default {
57 this.updatePopper(); 61 this.updatePopper();
58 this.$emit('on-popper-show'); 62 this.$emit('on-popper-show');
59 } else { 63 } else {
60 - this.destroyPopper();  
61 this.$emit('on-popper-hide'); 64 this.$emit('on-popper-hide');
62 } 65 }
63 this.$emit('input', val); 66 this.$emit('input', val);
@@ -81,14 +84,21 @@ export default { @@ -81,14 +84,21 @@ export default {
81 } 84 }
82 85
83 options.placement = this.placement; 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 this.$nextTick(this.updatePopper); 96 this.$nextTick(this.updatePopper);
90 this.$emit('created', this); 97 this.$emit('created', this);
91 - }); 98 + };
  99 +
  100 + this.popperJS = new Popper(reference, popper, options);
  101 +
92 }, 102 },
93 updatePopper() { 103 updatePopper() {
94 if (isServer) return; 104 if (isServer) return;
@@ -99,19 +109,6 @@ export default { @@ -99,19 +109,6 @@ export default {
99 if (this.visible) return; 109 if (this.visible) return;
100 this.popperJS.destroy(); 110 this.popperJS.destroy();
101 this.popperJS = null; 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 beforeDestroy() { 114 beforeDestroy() {
src/components/select/dropdown.vue
  Show/Hide comments   View file @130ea92
@@ -5,7 +5,8 @@ @@ -5,7 +5,8 @@
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'); // eslint-disable-line
  9 + import Popper from 'popper.js';
9 10
10 export default { 11 export default {
11 name: 'Drop', 12 name: 'Drop',
@@ -41,14 +42,12 @@ @@ -41,14 +42,12 @@
41 } else { 42 } else {
42 this.$nextTick(() => { 43 this.$nextTick(() => {
43 this.popper = new Popper(this.$parent.$refs.reference, this.$el, { 44 this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
44 - gpuAcceleration: false,  
45 placement: this.placement, 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,7 +58,6 @@
59 }, 58 },
60 destroy () { 59 destroy () {
61 if (this.popper) { 60 if (this.popper) {
62 - this.resetTransformOrigin(this.popper);  
63 setTimeout(() => { 61 setTimeout(() => {
64 if (this.popper) { 62 if (this.popper) {
65 this.popper.destroy(); 63 this.popper.destroy();
@@ -67,12 +65,6 @@ @@ -67,12 +65,6 @@
67 } 65 }
68 }, 300); 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 created () { 70 created () {