vue-ins-progress-bar 一款 ins 风格的 vue 页面加载进度条组件

1 安装
npm i vue-ins-progress-bar

2 main.js

import VueInsProgressBar from 'vue-ins-progress-bar'
const options = {
  position: 'fixed',
  show: true,
  height: '3px'
}
Vue.use(VueInsProgressBar, options)

3 App.vue

<template>
  <div id="app">
    <router-view/>
    <vue-ins-progress-bar></vue-ins-progress-bar>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    this.$insProgress.finish()
  },
  created () {
    this.$insProgress.start()
    this.$router.beforeEach((to, from, next) => {
      this.$insProgress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$insProgress.finish()
    })
  }
}
</script>

4.APIs

this.$insProgress.start()//开始回调this.$insProgress.finish() // 结束回调
this.$insProgress.height(4) // 加载栏的高度调整为4px