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;

}

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

成功的颜色

失败的颜色

你可能感兴趣的:(vue实现竖式步骤条)