Vue SSR 项目 Nuxt.js 框架之《如何增加全局 lo

# 前言

nuxt还有一个好玩的功能，他提供了一个页面加载的loading在页面头部展示，可设置高度、颜色等样式。页面开始加载时启动，加载完成后自动消 (官网参考)。

# 实现与配置

配置nuxt.config.js

export default{
    loading: {
        color: 'blue', // 进度条的颜色
        failedColor: 'red', // 页面加载失败时的颜色（ 当 data 或 fetch 方法返回错误时）
        height: '20px', // 进度条的高度(在进度条元素的 style 属性上体现)
        throttle: 200, // 在 ms 中， 在显示进度条之前等待指定的时间。 用于防止条形闪烁
        duration: 5000, // 进度条的最大显示时长， 单位毫秒。 Nuxt.js 假设页面在该时长内加载完毕
        continuous: false, // 当加载时间超过duration时， 保持动画进度条
        css: true, // 设置为 false 以删除默认进度条样式（ 并添加自己的样式）
        rtl: false // 从右到左设置进度条的方向
    }
}

这时切换页面，就能子页面顶部看到进度条了

# 定义实现

我们新建一个自己的加载组件来替代Nuxt.js默认的，需要在loading配置项里指定组件的路径，Nuxt.js 会自动调用该组件。而且自定义组件需要实现以下接口方法：

我们在components文件下创建loading.vue作为自定义loading，内容如下：

<template>
    <!-- 自定义loading -->
    <div class="loading-box" v-if="laoding" />
</template>

<script>
    export default {
        data:()=>({
            laoding: false
        }),
        methods:{
            start(){
                this.laoding = true;
            },
            finish(){
                this.laoding = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .loading-box{
        width: 100px;
        height: 100px;
        background-color: #23465a;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999999;
        animation: rotateplane 1.5s infinite ease-in-out;
        -webkit-animation: rotateplane 1.5s infinite ease-in-out;
    }

    @-webkit-keyframes rotateplane {
        0%{-webkit-transform:  perspective(120px);}
        50%{-webkit-transform:  perspective(120px) rotateY(180deg);}
        100%{-webkit-transform:  perspective(120px) rotateY(180deg) rotateY(180deg);}
    }

    @keyframes rotateplane {
        0%{
            transform:  perspective(120px) rotateY(0deg) rotateY(0deg);
            -webkit-transform:  perspective(120px) rotateY(0deg) rotateY(0deg);
        }
        50%{
            transform:  perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            -webkit-transform:  perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        }
        100%{
            transform:  perspective(120px) rotateX(-180deg) rotateY(179.9deg);
            -webkit-transform:  perspective(120px) rotateX(-180deg) rotateY(179.9deg);
        }
    }
</style>

记得改了nuxt.config.ls记得重启，之后切换页面就可以看到自定义的loading了~~