最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 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,先来写结构和样式,这里很简单:
.b