vue中progress进度条组件（自定义，可复用）

1.在page中新建一个Progress组件（Progress.vue）

<template>
  <div class="m-progress" :style="`width:${width}rem;`">
    <div class="m-progress-outer">
      <div class="m-progress-inner">
        <div class="u-progress-bg" :style="`width: ${progress}%;`"></div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Progress',
  props: {
    width: {
      type: Number,
      default: 200
    },
    progress: {
      type: Number,
      default: 15
    }
  }
}
</script>
<style lang="less" scoped>
.m-progress {
  color: rgba(0,0,0,.65);

  .m-progress-outer {
    display: inline-block;
    width: calc(100%);
    // background: rgb(55, 187, 40);

    .m-progress-inner {
      width: 100%;
      background-color: #0b0b0b;
      border-radius: 10rem;

      .u-progress-bg {
        background-color: #f1540b;
        border-radius: 10rem;
        height: 1.5rem;
        transition: all .3s cubic-bezier(.08,.82,.17,1) 0s;
      }
    }
  }
}
</style>

2.在需要使用进度条组件的页面中引入并使用

<template>
    <div class='baifenbi'>
    <Progress :width="23" :progress="50"/>
    </div>

</template>

import Progress from './Progress.vue'
export default {
    name:'traffic',
    components: {
        Progress,
    },
    setup() {
        
    });
    return {
       
    }
    }
    
}
</script>
<style>
.baifenbi {
    display: inline-block;
    width: 22rem;
    height: 5rem;
    /* background-color: rgb(47, 211, 39); */
}
</style>