Vue进度条组件的完成图文详细教程（代码示例）

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于 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，先来写结构和样式，这里很简单：
<template>
      <p :style='style'></p>
</template>

<style scoped>
      .bar {
        position: fixed;
        z-index: 99999;
        opacity: 1;
      }
</style>在注册组件的时候，我想可以自定义一些功能，比如
成功的颜色
失败的颜色
进度条的位置
动画过渡时间
加载方向
高度
是否可以自动完成
当然只要你想到的都可以添加，那么这些可以定制的属性，自然而然就成为了组件的 props：
export default {
      name: 'progressBar',
      props: {
        options: {
          type: Object,
          default () {
            return {
              succColor: 'rgb(76, 164, 214)',
              failColor: 'rgb(218, 26, 101)',
              position: 'top',
              transition: {
                widthSpeed: 200,
                opacitySpeed: 400,
                duration: 300  // 定义消失时间 ms
              },
              inverse: false,  // 进度条的加载方向
              thickness: 2  // 进度条的高度
            }
          }
        }
      }
}
</script>除了要定义的属性以外，那么组件本身总要有一些自己的属性，用来控制自己的状态，比如这个组件，你要控制进度条的长度、显示和隐藏等状态。
添加 vue 的 data 属性：
data () {
      return {
      percent: 0,  // 进度条长度
            show: false, // 显示和隐藏
            canSuccess: true  // 是否是成功的状态
      }
}有了这些属性，这个进度条就要根据这些属性的变化来“自己动”。所以这个时候首先想到的当然就是 Vue 的计算属性：
computed: {
  style () {
    // 先拿到乱七八糟的属性
    const { succColor, failColor, location, transition, inverse, thickness } = this.options
    const { widthSpeed, opacitySpeed } = transition
    const { canSuccess, preset, show } = this
    
 // 定义 css 样式
    const style = {
      backgroundColor: canSuccess ? succColor : failColor,
      opacity: show ? 1 : 0
    }

    if (position !== 'top'   关键词：Vue进度条组件的完成图文详细教程（代码示例）