vue实现竖式步骤条_手把手教你实现一个 Vue 进度条组件！

最近在个人的项目中，想对页面之间跳转的过程进行优化，想到了很多文档或 npm 等都用到的页面跳转进度条，于是便想自己去实现一个，特此记录。

来看下 npm 搜索组件时候的效果：

so 下面咱们一起动手实现一下呗。

定义使用方式

想实现一个组件的前提，一定要想好你的需求是什么，还要自己去定义一个舒服的使用方法，这其中也是有原则的，对使用者来说，使用方式越简单越好。那么对应的代价就是写这个组件的复杂度会变高。

我想要的使用方式是这样的：可以在任意的地方去调用到这个方法，可以随时控制其状态。

看下对应的代码：

async someFunction () {

this.$progress.start()

try {

const ret = await axios.get('/xxx')

// some code ...

this.$progress.finish()

} catch (err) {

// cache err ...

this.$progress.fail()

}

}

当然，想在任意地方使用，少不了一个步骤，就是在全局注册这个组件：

import progressBar from 'xxx/progress-bar'

Vue.use(progressBar, { // some config ... })

如果不想全局注册，你也可以在某个组件内单独使用，只要你开心就好。

实现过程

先来建立一个文件夹和其中两个文件：

progress-bar

- 01 progress-bar.vue

- 02 index.js

打开progress-bar.vue，先来写结构和样式，这里很简单：

.bar {

position: fixed;

z-index: 99999;

opacity: 1;

}

在注册组件的时候，我想可以自定义一些功能，比如

成功的颜色

失败的颜色