项目中UI给出了一种进度条按钮，进度百分比居中显示，颜色为蓝色，被进度覆盖过的颜色是白色，该如何实现呢？
    image.png

    点击查看【codepen】

    1. <template>
    2.   <div id="app">
    3.    <div class="progress-wrapper" @click="process">
    4.       <div class="progress-outer">
    5.         <div class="progress-inner" :style="{width: `${percentage}%`}">
    6.            <span class="progress-text" v-if="!percentage">点击开始</span>
    7.            <span class="progress-text" v-else>
    8.              <span class="num">{{percentage}}</span>%
    9.            </span>
    10.         </div>
    11.         <span class="progress-text" v-if="!percentage">点击开始</span>
    12.         <span class="progress-text" v-else>
    13.           <span class="num">{{percentage}}</span>%
    14.         </span>
    15.       </div>
    16.     </div>
    17.   </div>
    18. </template>
    20. <script>
    21. export default {
    22.   data() {
    23.     return {
    24.       percentage: 0
    25.     };
    26.   },
    27.   methods: {
    28.     process() {
    29.       var intervalFn = setInterval(()=>{
    30.         if(this.percentage >= 100){
    31.           this.percentage = 100;
    32.           clearInterval(intervalFn)
    33.         }else{
    34.           this.percentage += 1;
    35.         }
    36.       },100)
    37.     }
    38.   }
    39. };
    40. </script>
    42. <style>
    43. #app {
    44.   font-family: Avenir, Helvetica, Arial, sans-serif;
    45.   text-align: center;
    46.   color: #2c3e50;
    47.   margin-top: 60px;
    48. }
    50. .progress-wrapper{
    51.   width: 110px;
    52.   height: 36px;
    53.   padding: 4px;
    54.   line-height:36px;
    55.   box-sizing: border-box;
    56.   border: 1px solid #4781ff;
    57.   border-radius: 22px;
    58.   cursor: pointer;
    59. }
    60. .progress-outer{
    61.   width:100%;
    62.   height:100%;
    63.   border-radius: 22px;
    64.   background:white;
    65.   position: relative;
    66.   overflow:hidden;
    67.   color:#4781FF;
    68. }
    69. .progress-inner{
    70.   position: absolute;
    71.   width:0;
    72.   height:100%;
    73.   background: #4781FF;
    74.   color: white;
    75.   z-index:1;
    76.   overflow: hidden;
    77. }
    78. .progress-text{
    79.   position: absolute;
    80.   top: 50%;
    81.   left: 50px;
    82.   transform: translate(-50%, -50%);
    83.   white-space: nowrap;
    84. }
    85. </style>

    image.png

    • 利用absolute定位，同时设置inner的width为百分比，用来模拟进度。
    • 设置两个重叠的text，一个与inner平级，一个在inner内部，文字颜色分别继承他们父级设置的颜色。
    • 进度条走过的地方显示的其实是inner里面的text，没走过的地方显示的是与inner平级的text
    • 当进度到100%之后，inner的width也为100%，此时与inner同级的progress-text被inner覆盖。

      注意，progress-text的left值 不能设置成50%，因为他的位置同时也受progress-inner的宽度影响，我们需要的是文字始终居中。 所以需要写死宽度为progress-outer的总宽度px的一半，再利用transform: translate(-50%,-50%)偏移自身宽高的一半，实现上下左右居中。