magiccube-vue3/package/utils/popup.js

vue3-js版组件库

import { ref, Teleport, onUnmounted, getCurrentInstance } from 'vue'
import * as utils from './common'

export default {
    props: {
        maskType: String
    },
    emits: ['close', 'click-mask'],
    setup(props, { emit, slots, expose }) {

        const uuid = utils._uuid()

        /* 动态锚点 */
        const instance = getCurrentInstance()
        const globalOptions = instance.appContext?.config?.globalProperties?.$ELEMENT
        const TELEPORT_NAME = globalOptions.teleportName? `.${globalOptions.teleportName}` : 'body'

        const fade = ref(null)
        let runner = null

        const visible = (options) => {
            fade.value = true
            runner && clearTimeout(runner)
        }

        const invisible = () => {
            fade.value = false

            runner && clearTimeout(runner)
            runner = setTimeout(() => {
                fade.value = null
            }, 400);
        }

        onUnmounted(() => {
            /**
             * 注销并移除下拉dom
             */
            const target = document.getElementById(uuid)
            target && target.parentNode.removeChild(target)
        })

        const handleClickMask = (e) => {
            if(e.target !== e.currentTarget) return
            emit('click-mask')
        }

        expose({
            visible,
            invisible
        })

        return () => (
            <Teleport to={TELEPORT_NAME}>
                <div id={uuid}
                    class={[
                        'mc-popup-panel',
                        {
                            'fade-in': fade.value,
                            'fade-out': !fade.value && fade.value !== null,
                            dark: props.maskType === 'dark',
                            white: props.maskType === 'white',
                            transparent: props.maskType === 'transparent'
                        }
                    ]}
                    onClick={handleClickMask}>
                    {slots.default ? slots.default() : ''}
                </div>
            </Teleport>
        )
    }
}