drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update popper.js

Browse source 
fix #1990
This commit is contained in:
huanghong 2018-03-15 00:07:11 +08:00
parent 44420acb68
commit 130ea92a19
5 changed files with 69 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
examples/routers/select.vue
View file

@ -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>

20
package-lock.json generated
View file

@ -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",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-0.6.4.tgz",
"integrity": "sha1-GDfEdgr1TSuyC2b5wJuSmT2Exik="
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.1.tgz",
"integrity": "sha1-uIFeXNpvYvwgQuR2GGSfdYZuZ1M="
},
"portfinder": {
"version": "1.0.13",
@ -14027,8 +14027,7 @@
"vue": {
"version": "2.5.16",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz",
"integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ==",
"dev": true
"integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ=="
},
"vue-hot-reload-api": {
"version": "2.3.0",
@ -14228,6 +14227,15 @@
}
}
},
"vue-popperjs": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/vue-popperjs/-/vue-popperjs-1.2.6.tgz",
"integrity": "sha512-0SEPDdQY8NxRcDiWXTgW6nMpRcc+rSpcELsLszuPzehBqQ5/9AGAr2OGKh1smwcaRe8Rb1CtE399vNz9+jYorw==",
"requires": {
"popper.js": "1.14.1",
"vue": "2.5.16"
}
},
"vue-router": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",

2
package.json
View file

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

43
src/components/base/popper.js
View file

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

22
src/components/select/dropdown.vue
View file

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