vue-ins-progress-bar
a vue component of ins-style progress bar
一款 ins 风格的 vue 进度条组件
Demo
Install
$ npm i vue-ins-progress-bar Usage
main.js
import VueInsProgressBar from 'vue-ins-progress-bar' const options = { position: 'fixed', show: true, height: '3px' } Vue.use(VueInsProgressBar, options)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>APIs
this.$insProgress.start() // start the loadingthis.$insProgress.finish() // finish the loadingthis.$insProgress.height(4) // resize the height of loading bar to 4pxSource
Repository: vue-ins-progress-bar
Author: @meloalright
