vue3.2 中利用自定义指令和 函数调用式创建一个loading组件

loading.vue

<template>
    <div class="loaing-mask">
        <div class="loading-wrapper">
            <div class="loading-content">
                <img width="50" height="50" src="../../assets/images/loading/loading.gif" />
                <p class="title">{{ message }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    message: {
        type: String,
        default: '正在加载中...'
    }
})
</script>

<style lang="scss" scoped>
.loaing-mask {
    background-color: rgba(#eee, 0.6);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 20;
}
.loading-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    .loading-content {
        width: 100%;
        text-align: center;

        .title {
            line-height: 20px;
            font-size: 12px;
            color: #000;
        }
    }
}
</style>

自定义指令

import { createApp } from 'vue'
import Loading from '@/components/other/ewz-loading.vue'

const loadingDirective = {
    name: 'loading',
    mounted(el, binding) {
        //创建一个组件实例
        const loadingCtor = createApp(Loading)
        //创建一个空的dom
        const parent = document.createElement('div')
        //挂载组件实例
        const loadingComp = loadingCtor.mount(parent)
        el.instance = loadingComp
        if (binding.value) {
            append(el)
        }
    },
    updated(el, binding) {
        if (binding.value !== binding.oldValue) {
            binding.value ? append(el) : remove(el)
        }
    }
}

function append(el) {
    el.appendChild(el.instance.$el)
}

function remove(el) {
    el.removeChild(el.instance.$el)
}

export default loadingDirective

函数调用

import Loading from '@/components/other/ewz-loading.vue'
import { createVNode, render } from 'vue'
const loading = ({ message, duration = 2000 }) => {
    //创建一个vm 实例
    const _vm = createVNode(Loading, { message, duration })
    //创建一个承载容器
    const container = document.createElement('div')
    //插入到body里
    document.body.appendChild(container)
    //挂载dom
    render(_vm, container)
    //销毁的方法
    _vm.component.ctx.clear = () => {
        render(null, container)
        document.body.removeChild(container)
    }
    //如果传入的时长为0 选择调用关闭
    if (duration === 0) {
        return _vm.component.ctx
    }
    const t = setTimeout(() => {
        _vm.component.ctx.clear()
        clearTimeout(t)
    }, duration)

    return _vm.component.ctx
}
export default loading