element-plus/es/el-overlay/index.js

A Component Library for Vue3.0

import { defineComponent, createVNode, renderSlot, h } from 'vue';
import { PatchFlags } from '../utils/vnode';

var script = defineComponent({
    name: 'ElOverlay',
    props: {
        mask: {
            type: Boolean,
            default: true,
        },
        overlayClass: {
            type: [String, Array, Object],
        },
        zIndex: {
            type: Number,
        },
    },
    emits: ['click'],
    setup(props, { slots, emit }) {
        let mousedownTarget = false;
        let mouseupTarget = false;
        const onMaskClick = (e) => {
            if (mousedownTarget && mouseupTarget) {
                emit('click', e);
            }
            mousedownTarget = mouseupTarget = false;
        };
        return () => {
            return props.mask
                ? createVNode('div', {
                    class: ['el-overlay', props.overlayClass],
                    style: {
                        zIndex: props.zIndex,
                    },
                    onClick: onMaskClick,
                    onMousedown: (e) => {
                        if (props.mask) {
                            mousedownTarget = e.target === e.currentTarget;
                        }
                    },
                    onMouseup: (e) => {
                        if (props.mask) {
                            mouseupTarget = e.target === e.currentTarget;
                        }
                    },
                }, [renderSlot(slots, 'default')], PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS, ['onClick', 'onMouseup', 'onMousedown'])
                : h('div', {
                    style: {
                        zIndex: props.zIndex,
                        position: 'fixed',
                        top: '0px',
                        right: '0px',
                        bottom: '0px',
                        left: '0px',
                    },
                }, [renderSlot(slots, 'default')]);
        };
    },
});

script.__file = "packages/overlay/src/index.vue";

export { script as Overlay };