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

小三金2023-11-16 14:52

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

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

javascript 复制代码

<template>
  <div class="wrapper-progress">
    <Transition name="fade">
      <el-progress v-if="show" v-bind="attrs" :color="colors" :percentage="perc" :show-text="false" stroke-width="3" />
    </Transition>
  </div>
</template>
<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<boolean> = 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>