typora-root-url: public

pro-progress-bar

效果图

Project setup

npm install pro-progress-bar

使用方法

全局注册

import ProgressBar from 'pro-progress-bar'

// 进度条配置项
const progressOptions = {
  succColor: '#f12b25',
  failColor: '#E5433E',
  gradient: false, // 线性渐变
  gradientColor: {
    successColor: 'linear-gradient(0deg, #FF6B48 0%, #FF9946 54%, #FFB944 100%)',
    failColor: 'linear-gradient(0deg, #A5A5A5 0%, #C0C0C0 54%, #D8D8D8 100%)'
  },
  stripe: true, // 开启条纹进度条
  stripeColor: {
    successColor: 'repeating-linear-gradient(-45deg, #ff8b46 25%, #ff6c2a 0, #ff6c2a 50%, #ff6c2a 0, #ff8b46 75%, #ff6c2a 0)',
    failColor: 'repeating-linear-gradient(-45deg, #c8c8c8 25%, #b2b2b2 0, #b2b2b2 50%, #b2b2b2 0, #c8c8c8 75%, #b2b2b2 0)'
  },
  transition: {
    widthSpeed: 200,
    opacitySpeed: 400,
    duration: 800 // 定义消失时间 ms
  },
  inverse: true, // 进度条的加载方向
  thickness: 18, // 进度条的高度
  autoFinish: false // 设定动画是否可以自动完成，默认是 true
}
Vue.use(ProgressBar,progressOptions)

局部注册

<script>
  import ProgressBar from 'pro-progress-bar'
  export default {
      name:'xxx',
      components:{ProgressBar}
  }
</script>

在项目中使用

<template>
  <div class="home">
    <button class="md-btn md-theme-primary" type="button" @click="openProgress()">导出成功</button>
    <button  class="md-btn md-theme-error" type="button" @click="openProgressFail()">导出失败</button>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {
    
  },
  methods:{
    openProgress(){
      this.$progress.start({tip:'正在导出中...,请稍后'})
      setTimeout(()=>{
          //模拟ajax请求
        this.$progress.finish('导出成功')
      },1000)
     
    },
    openProgressFail(){
      this.$progress.start({tip:'正在导出中...,请稍后'})
      setTimeout(()=>{
          //模拟ajax请求
        this.$progress.fail('导出失败')
      },1000)
    }
  }
}
</script>
<style>
.md-btn{
  font-size:18px;
  line-height:40px;
  border:none;
  outline:none;
  color:#fff;
  margin-right:20px;
  border-radius:4px;
  cursor:pointer;
}
.md-theme-primary{
  background:blue;
}
.md-theme-error{
  background:red;

}
</style>

配置项

| 属性 | 说明 | 类型 | 默认值 | | ---- | ---------------------------------------------------------- | ------ | ------ | | tip | 进度条start的提示信息文字 | String | 导出中 | | time | 用来控制进度条加载的快慢，数值越大，加载时长越长，加载越慢 | Number | 100 |