The site is basically built, then the product said, or add a loading progress bar.

Loading progress bar

Using the nprogress plugin NPM I nprogress-s is typically written in request and response interceptors. But I’m using front-end routing, so the page is static, there are no requests, so it’s in the routing guard. router.js

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) = > {
    NProgress.start()
    next()
})

router.afterEach((to, path) = > {
    NProgress.done()
})
Copy the code

When the requirement was completed, the browser’s own scrollbar was found to be too ugly, and the el-Scrollbar was replaced by the original one.

Replace scroll bar

Although the Element Plus website says that if you don’t add a height, it defaults to the height of the parent element, but trying it out doesn’t work. It adds an initial height and gets the browser viewport height assignment when the page first loads. When the viewport height changes, the value is dynamically assigned to el-Scrollbar

//App.vue
<template>
    <el-scrollbar>
        <router-view></router-view>
    </el-scrollbar>
</template>

<style>
html.body.#app{
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>
Copy the code

Demand and complete the follow-up supplement…