vue3+ts+elementplus 进度条制作浏览器进度条

开发工具：vue3 + ts + elementplus + el-progress

NProgress

在布署的时候，Jenkins总是提示失败，指向NProgress的问题，但是我却不知道为何，找不到相关解决方案，一气之下，就打算用别的方案了。

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed, useAttrs } from "vue";
import type { Ref } from "vue";
const attrs = useAttrs(); //所有非defineProps中定义的属性
 
const emits = defineEmits(["start", "finish", "update:size"]);
 
// 组件属性
const props = defineProps({
  percentage: {
    type: Number,
    default: 20,
  },
  setp: {
    type: Number,
    default: 8,
  },
  per: {
    type: Number,
    default: 150,
  },
});
let maxNum: number = 90;
const colors: Object[] = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#36CEBF", percentage: 100 },
];
 
let show: Ref = ref(false);
let perc: any = ref(0);
 
//开始事件
const start = () => {
  show.value = true;
  function task() {
    if (perc.value > maxNum) {
      perc.value = maxNum;
      clearInterval(intervalID);
    }
    perc.value = perc.value + props.setp;
  }
 
  // 执行
  let intervalID = setInterval(() => {
    task();
  }, props.per);
};
 
// 完成事件
const finish = () => {
  perc.value = 100;
  setTimeout(() => {
    show.value = false;
  }, 500);
};
 
defineExpose({
  start,
  finish,
});
script>
 
<style lang="scss" scoped>
.wrapper-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 999;
 
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }
 
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
}
style>