90 lines
3.1 KiB
Vue
90 lines
3.1 KiB
Vue
<template>
|
|
<div class="ivu-select-dropdown" :class="className" :style="styles"><slot></slot></div>
|
|
</template>
|
|
<script>
|
|
import Vue from 'vue';
|
|
const isServer = Vue.prototype.$isServer;
|
|
import { getStyle } from '../../utils/assist';
|
|
const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js'); // eslint-disable-line
|
|
|
|
export default {
|
|
name: 'Drop',
|
|
props: {
|
|
placement: {
|
|
type: String,
|
|
default: 'bottom-start'
|
|
},
|
|
className: {
|
|
type: String
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
popper: null,
|
|
width: ''
|
|
};
|
|
},
|
|
computed: {
|
|
styles () {
|
|
let style = {};
|
|
if (this.width) style.width = `${this.width}px`;
|
|
return style;
|
|
}
|
|
},
|
|
methods: {
|
|
update () {
|
|
if (isServer) return;
|
|
if (this.popper) {
|
|
this.$nextTick(() => {
|
|
this.popper.update();
|
|
});
|
|
} else {
|
|
this.$nextTick(() => {
|
|
this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
|
|
placement: this.placement,
|
|
modifiers: {
|
|
computeStyle:{
|
|
gpuAcceleration: false,
|
|
}
|
|
},
|
|
onCreate:()=>{
|
|
this.resetTransformOrigin();
|
|
this.$nextTick(this.popper.update());
|
|
},
|
|
onUpdate:()=>{
|
|
this.resetTransformOrigin();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
// set a height for parent is Modal and Select's width is 100%
|
|
if (this.$parent.$options.name === 'iSelect') {
|
|
this.width = parseInt(getStyle(this.$parent.$el, 'width'));
|
|
}
|
|
},
|
|
destroy () {
|
|
if (this.popper) {
|
|
setTimeout(() => {
|
|
if (this.popper) {
|
|
this.popper.destroy();
|
|
this.popper = null;
|
|
}
|
|
}, 300);
|
|
}
|
|
},
|
|
resetTransformOrigin() {
|
|
let placement = this.popper.popper.getAttribute('x-placement').split('-')[0];
|
|
this.popper.popper.style.transformOrigin = placement==='bottom'?'center top':'center bottom';
|
|
}
|
|
},
|
|
created () {
|
|
this.$on('on-update-popper', this.update);
|
|
this.$on('on-destroy-popper', this.destroy);
|
|
},
|
|
beforeDestroy () {
|
|
if (this.popper) {
|
|
this.popper.destroy();
|
|
}
|
|
}
|
|
};
|
|
</script>
|