vue进度条组件
vue-ins-progress-bar (vue-ins-progress-bar)
a vue component of ins-style progress bar.
ins风格进度栏的vue组件。
View demo 查看演示 Download Source 下载源
安装 (Install)
npm i vue-ins-progress-bar
用法 (Usage)
main.js
main.js
import VueInsProgressBar from 'vue-ins-progress-bar'const options = {position: 'fixed',show: true,height: '3px'}Vue.use(VueInsProgressBar, options)
App.vue
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 loading
this.$insProgress.finish() // finish the loading
this.$insProgress.height(4) // resize the height of loading bar to 4px
翻译自: /a-vue-component-of-ins-style-progress-bar/
vue进度条组件
