vue实现自定义进度条

1. Vue项目没有引入element的依赖，自定义实现进度条，效果如下：

2. template代码

<div class="progress-bar">
   <div class="progress-bar-outer">
     <span class="progress-text" :style="{color: '#156edb'}">
         {
   
   {'已用 ' + this.usedMemory + ' MB / 总空间 ' + this.totalMemory + ' MB'}}
     </span>
     <div class="progress-bar-inner" :style="{backgroundColor:'#4ba5f8',width: this.usedMemory + '%'}"/>
   </div>
</div>

3. js代码 

export default {
	name: 'Index',
	data() {
	  return {
		usedMemory: '18',
		totalMemory: '100'
	  }
	},
	methods: {
	 
	}
};

4. css代码 

  .progress-bar{
    display:inline-block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    margin-bottom: 18px;
  }

  .progress-bar-outer{
    width: 100%;
    border-radius: 15px;
    background-color: #e1f0ff;
    height:30px;
    align-items: center;
    display: flex;
  }

  .progress-text{
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    margin-left: 60%;
  }

  .progress-bar-inner{
    border-radius: 15px 15px 15px 15px;
    height: 100%;
    transition: width 0.6s ease;
    text-align: right;
    line-height: 80%;
  }