VueJs:Laravel- 添加在加载所有数据时显示在页面前面的加载微调器

Question

我想添加加载微调器，直到未加载数据。为此，我创建了一个加载 component.vue

<template>
    <div class="preloader" v-if="show">
        <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "PreloaderComponent",
    data: () => ({
        show: true
    }),
    mounted(){
        if(Boolean(this.show)) this.showToggle()
    },
    methods: {
        showToggle(){
            setTimeout(() => {
                this.show = false
            }, 1000)
        }
    }
}
</script>

<style lang="scss">
.preloader {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

并将此组件视图导入我们的 dashboard.vue 中，以便在加载仪表板中的所有小部件后，微调器就会消失。但是通过添加此代码微调器不会在加载所有小部件后消失。 所以我正在寻找添加黑色微调器的解决方案，并在加载仪表板上的数据时稍微调暗背景，这应该适用于我们添加的所有未来 API 调用，所以我试图找到可以自动解决此问题的解决方案与 Vue。

找到一个解决方案，了解如何在仪表板中添加一个加载微调器，直到页面无法正确加载。在所有情况下，加载微调器只显示 1 秒；如果从 API 加载数据需要更长的时间，那么当数据尚未加载时，微调器可能会在 1 秒后消失。或者，如果数据加载速度非常快，用户可能会等待整整一秒完成。第一个问题更令人担忧，因为我们需要让微调器保持启动状态，直到所有内容都加载完毕。

Answer 1

这是我正在使用的装载机：

<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44">
    <style type="text/css">
          <![CDATA[
            g circle {
              stroke: #fff;
              stroke-width: 3;
            }
            g circle {
              opacity: 0;
              animation: size cubic-bezier(0.165, 0.84, 0.44, 1) 1.8s infinite,
                         opacity cubic-bezier(0.3, 0.61, 0.355, 1) 1.8s infinite;
              transform-origin: 50% 50%;
            }
            g circle:last-child { animation-delay: 0.9s; }
            @keyframes size {
              0% { transform: scale(0); }
              100% { transform: scale(1); }
            }
            @keyframes opacity {
              5% { opacity: 1; }
              100% { opacity: 0; }
            }
          ]]>
    </style>
    <g fill="none">
        <circle cx="22" cy="22" r="20"/>
        <circle cx="22" cy="22" r="20"/>
    </g>
</svg>

这是一个普通的 svg 加载器，无论 js/vue，甚至加载外部 css，都可以工作， 互联网上还有更多 svg 加载器可供选择。

这些加载程序将立即加载，并且非常适合。 如果需要，您也可以将加载程序放在#app div 之外， 因此您可以决定何时删除它，如果您的应用需要时间来加载。

您可能需要黑色或白色背景，并且可能需要将其置于网页的中心并使其绝对定位。

我把装载机带到了这里：https://samherbert.net/svg-loaders/