klook-web-uikit/src/components/tooltip/vue-popper.js

A Component Library for Vue.js

import Popper from './popper';

export default {
    props: {
        placement: {
            type: String,
            default: 'top'
        },
        reference: Object,
        popper: Object,
        offset: {
            default: 0
        },
        value: {
            type: Boolean,
            default: false
        },
        transition: String,
        options: {
            type: Object,
            default() {
                return {
                    modifiers: {
                        computeStyle: {
                            gpuAcceleration: false,
                        },
                        preventOverflow: {
                            boundariesElement: 'window'
                        }
                    }
                };
            }
        },
    },
    data() {
        return {
            visible: this.value
        };
    },
    watch: {
        value: {
            immediate: true,
            handler(val) {
                this.visible = val;
                this.$emit('input', val);
            }
        },
        visible(val) {
            if (val) {
                this.updatePopper();
                this.$emit('on-popper-show');
            } else {
                this.$emit('on-popper-hide');
            }
            this.$emit('input', val);
        }
    },
    updated() {
        this.$nextTick(() => this.updatePopper());

    },
    beforeDestroy() {
        if (this.popperJS) {
            this.popperJS.destroy();
        }
    },
    methods: {
        createPopper() {
            if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
                return;
            }

            const options = this.options;
            const popper = this.popper || this.$refs.popper;
            const reference = this.reference || this.$refs.reference;

            if (!popper || !reference) return;

            if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
                this.popperJS.destroy();
            }

            options.placement = this.placement;

            if (!options.modifiers.offset) {
                options.modifiers.offset = {};
            }
            options.modifiers.offset.offset = this.offset;
            options.onCreate = () => {
                this.$nextTick(this.updatePopper);
                this.$emit('created', this);
            };

            this.popperJS = new Popper(reference, popper, options);

        },
        updatePopper() {
            this.popperJS ? this.popperJS.update() : this.createPopper();
        },
        doDestroy() {
            if (this.visible) return;
            this.popperJS.destroy();
            this.popperJS = null;
        }
    }
};