Modify the directory structure

Modify the directory structure

src/components/base/popper.js

@@ -0,0 +1,101 @@
+/**
+ * https://github.com/freeze-component/vue-popper
+ * */
+import Popper from 'popper.js';
+
+export default {
+    props: {
+        placement: {
+            type: String,
+            default: 'bottom'
+        },
+        boundariesPadding: {
+            type: Number,
+            default: 5
+        },
+        reference: Object,
+        popper: Object,
+        offset: {
+            default: 0
+        },
+        value: Boolean,
+        transition: String,
+        options: {
+            type: Object,
+            default () {
+                return {
+                    gpuAcceleration: false,
+                    boundariesElement: 'body'
+                }
+            }
+        },
+        visible: {
+            type: Boolean,
+            default: false
+        }
+    },
+    watch: {
+        value: {
+            immediate: true,
+            handler(val) {
+                this.visible = val;
+                this.$emit('input', val);
+            }
+        },
+        visible(val) {
+            val ? this.updatePopper() : this.destroyPopper();
+            this.$emit('input', val);
+        }
+    },
+    methods: {
+        createPopper() {
+            if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
+                return;
+            }
+
+            const options = this.options;
+            const popper = this.popper || this.$els.popper;
+            const reference = this.reference || this.$els.reference;
+
+            if (!popper || !reference) return;
+
+            if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
+                this.popperJS.destroy();
+            }
+
+            options.placement = this.placement;
+            options.offset = this.offset;
+
+            this.popperJS = new Popper(reference, popper, options);
+            this.popperJS.onCreate(popper => {
+                this.resetTransformOrigin(popper);
+                this.$nextTick(this.updatePopper);
+                this.$emit('created', this);
+            });
+        },
+        updatePopper() {
+            this.popperJS ? this.popperJS.update() : this.createPopper();
+        },
+        doDestroy() {
+            if (this.visible) return;
+            this.popperJS.destroy();
+            this.popperJS = null;
+        },
+        destroyPopper() {
+            if (this.popperJS) {
+                this.resetTransformOrigin(this.popperJS);
+            }
+        },
+        resetTransformOrigin(popper) {
+            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() {
+        if (this.popperJS) {
+            this.popperJS.destroy();
+        }
+    }
+};