封装组件库-进度条

实现进度条的封装

基于Element-plus框架的Progress进度条组件，封装为动画进度条。

初始配置

注册路由组件progress，配置为Container组件的子路由组件
采用路由懒加载，箭头函数异步引入组件。
注册通用组件progress，为路由组件的子组件，以便组件间通信。
将通用组件progress注册为全局组件

progress组件

子组件

  //配置进度条，绑定父组件传值
  <el-progress :percentage="p" v-bind="$attrs"></el-progress>
  let props = defineProps({
      //进度条的进度
      percentage: {
          type: Number,
          default: 0
      },
      //进度条是否有动画效果
      isAnimation: {
          type: Boolean,
          default: false
      },
      //动画时长(毫秒)
      time: {
          type: Number,
          default: 3000
      }
  })
  // p计算当前的进度
  let p = ref(0)
  onMounted(()=>{
      if(props.isAnimation){
          //规定时间加载完成
          let t = Math.ceil(props.time / props.percentage)
          let timer = setInterval(()=>{
              p.value += 1
              if(p.value > props.percentage){
                  p.value = props.percentage
                  clearInterval(timer)
              }
          },t)
      }else{
          p.value = props.percentage
      }

父组件

    <my-progress :percentage="60" isAnimation></my-progress>
    <br/>
    //圆形样式
    <my-progress isAnimation
    :text-inside="true"
      :stroke-width="22"
      :percentage="80"
      status="warning"
    ></my-progress>
    <br/>
    //配置样式，圆形进度条
    <div class="progress-svg-style">
      <my-progress type="circle" :percentage="80" isAnimation></my-progress>
    </div>