magiccube-vue3/package/directives/loading/index.js

vue3-js版组件库

import loadingComponent from './Main.vue'
import { createApp } from 'vue'
function append(el) {
    setTimeout(() => {
        el.instance.$el.classList.add('mc-loading-fade-in')
    }, 5)
    el.insertBefore(el.instance.$el, el.childNodes[0])
}
function remove(el) {
    const loadingEl = el.querySelector('.mc-loading-block')
    loadingEl && loadingEl.remove()
    // setTimeout(() => {
    //     el.removeChild(el.instance.$el)
    // }, 205)
}
export default {
    name: 'loading',
    directive: {
        // 绑定元素的父组件被挂载时调用
        mounted(el, binding) {
            const position = el.style.position
            el.style.position = position || 'relative'
            const instance = createApp(loadingComponent).mount(document.createElement('div'))
            el.instance = instance
            if (binding.value) {
                append(el)
            }
        },
        // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
        updated(el, binding) {
            binding.value ? append(el) : remove(el)
        },
    }
}