仿Element-plus写一个自己的v-loading

具体步骤：

1.创建一个vue文件编写加载时的动画
2.封装一个加载指令（将组件挂载至实例中）
3.全局引入

第一步：编写一个加载插件

<template>
    <div class="loading">
        <!-- loading.html -->
        <div class="sk-cube-grid">
            <div class="sk-cube sk-cube-1"></div>
            <div class="sk-cube sk-cube-2"></div>
            <div class="sk-cube sk-cube-3"></div>
            <div class="sk-cube sk-cube-4"></div>
            <div class="sk-cube sk-cube-5"></div>
            <div class="sk-cube sk-cube-6"></div>
            <div class="sk-cube sk-cube-7"></div>
            <div class="sk-cube sk-cube-8"></div>
            <div class="sk-cube sk-cube-9"></div>
        </div>
    </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
    .loading {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 1);
        z-index: 99999;
        /* loading.css */
        .sk-cube-grid {
            width: 50px;
            height: 50px;
            margin: auto;
            background-color: #fff;
        }
        .sk-cube {
            width: calc(50px / 3);
            height: calc(50px / 3);
            background-color: var(--el-color-primary);
            float: left;
            animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
        }
        .sk-cube-1 {
            animation-delay: 0.2s;
        }
        .sk-cube-2 {
            animation-delay: 0.3s;
        }
        .sk-cube-3 {
            animation-delay: 0.4s;
        }
        .sk-cube-4 {
            animation-delay: 0.1s;
        }
        .sk-cube-5 {
            animation-delay: 0.2s;
        }
        .sk-cube-6 {
            animation-delay: 0.3s;
        }
        .sk-cube-7 {
            animation-delay: 0s;
        }
        .sk-cube-8 {
            animation-delay: 0.1s;
        }
        .sk-cube-9 {
            animation-delay: 0.2s;
        }
        @keyframes sk-cube-grid-scale-delay {
            0%,
            70%,
            100% {
                transform: scale3D(1, 1, 1);
            }
            35% {
                transform: scale3D(0, 0, 1);
            }
        }
    }
</style>

第二步：封装加载指令

import { createApp } from 'vue'
// 引入编写好的加载动画组件
import loadingCom from '@/components/loadingCom.vue'

const loading = {
    mounted(el: any, binding: any) {
        // 创建一个组建的实例
        const app = createApp(loadingCom)
        // 创建一个标签,将实例挂载到标签上
        const instance = app.mount(document.createElement('div'))
        // 把实例赋给将要使用的标签上，以后再需要使用时不需要重新挂载
        el.instance = instance
        el.positionStyle = el.style.position
        binding.value && appendEl(el)
    },
    updated(el: any, binding: any) {
        if (binding.value !== binding.oldValue) {
            binding.value ? appendEl(el) : removeEl(el)
        }
    }
}

function appendEl(el: any) {
    if (el.style.position === 'static' || !el.style.position) {
        el.style.position = 'relative'
    }
    el?.appendChild(el.instance.$el)
}

function removeEl(el: any) {
    el.style.position = el.positionStyle
    const $el = el.instance.$el
    el.contains($el) && el.removeChild($el)
}

const loadingPlugin = {
    install(app: any) {
        app.directive('loadingCom', loading)
    }
}

export default loadingPlugin

第三步：在main.js 中全局引入

import loadingCom from '@/utils/loadingDirectives'
app.use(loadingCom)

写在最后

1.动画的组件可以自定义，网上有许多可ctrl + c， ctrl+v
2.细心的同学可以发现，在挂载组建（createApp）的时候，我没有向组件传递prop，根据官网介绍是可以传递的，这样对于想写进度条动画的同学是很友好的，但是我一直没有更好的办法解决后续更改prop值的办法，望可以解决此问题的同学不吝赐教。