zoukankan      html  css  js  c++  java
  • NProgress进度条在nuxt项目中使用

    NProgress.js在nuxt项目中的使用

    nprogress 插件是一个适用于ajax 应用的轻量级的进度条插件
    使用步骤:
    在plugins中新建一个文件引入NProgress和css文件

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

    使用的话也非常的简单:

    //开启进度条
    NProgress.start();
    //关闭进度条
    NProgress.done();
    //设置百分比
    NProgress.set(0.4)
    //稍微增加
    NProgress.inc()
    

    还可以配置一下参数:

    //minimum 设置开始时最低百分比,默认是0.08
    NProgress.configure({ minimum: 0.1 });
    //template改变进度条的HTML结构。为了保证进度条正常工作,需要一个包含role='bar' 属性的元素
    NProgress.configure({
      template: "<div class='....'>...</div>"
    });
    //ease和speed ease可传递CSS3缓冲动画字符串(如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier)。speed为动画速度(默认200,单位ms)
    NProgress.configure({ easing: 'ease', speed: 500 });
    //trickle 是否显示进度条,默认:true
    NProgress.configure({ trickle: false });
    //trickleSpeed设置每次进度条步进速度(ms)
    NProgress.configure({ trickleSpeed: 200 });
    //showSpinner是否显示环形进度动画,默认true
    NProgress.configure({ showSpinner: false });
    //parent 指定改变的父容器,默认body
    NProgress.configure({ parent: '#container' });
    

    其中进度条的背景颜色、高度等都可以自己改变nprogress.css来实现
    最后一步,在路由跳转的时候使用:

    export default ({ app }) => {
      app.router.beforeEach((to, from, next) => {
        NProgress.start();
        next()
      });
    
      app.router.afterEach(() => {
        NProgress.done()
      });
    }
    
  • 相关阅读:
    win7服务器从本地粘贴的文件,粘贴卡死
    AOP面向切面编程
    静态代理和动态代理
    查询数据库中第n行数据
    记录我的成长
    路径总和,双重递归
    java Queue 常用方法(持续更新)
    对称二叉树
    Linux学习之五——Linux虚拟机文件系统
    Linux学习之四——命令运行机制及查看命令帮助
  • 原文地址:https://www.cnblogs.com/my466879168/p/13068690.html
Copyright © 2011-2022 走看看