Vue는 사용자 지정 진행률 표시줄을 구현합니다.

1. Vue 프로젝트는 요소 종속성을 도입하지 않고 사용자 정의 진행률 표시줄을 구현합니다.효과는 다음과 같습니다.

2. 템플릿 코드

<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%;
  }