PageProgress 页面进度条

说明

基于 el-progress 封装，页面级进度条组件，借鉴 NProgress 库的实现。

用法示例

基础用法

<template>
  <div>
    <y-page-progress v-model="isStarted" v-bind="config" />

    <div class="controls">
      <el-button @click="startProgress" type="primary" :disabled="isStarted">
        {{ isStarted ? '加载中...' : '开始加载' }}
      </el-button>
      <el-button @click="completeProgress" type="danger" :disabled="!isStarted"> 完成 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElButton, ElColorPicker, ElInputNumber, ElSwitch } from 'element-plus';

// 状态
const isStarted = ref(false);

// 配置
const config = reactive({
  color: 'red',
  strokeWidth: 10,
  speed: 200,
  spinner: true,
  delay: 200,
  step: 10,
});

const startProgress = () => {
  isStarted.value = true;
};

const completeProgress = () => {
  isStarted.value = false;
};
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	进度条开启/停止状态	boolean	false
step	步进距离 (0-100)	number	8
spinner	是否显示右上角的加载图标	boolean	true
delay	完成后的延迟隐藏时间 (ms)	number	200
speed	自动增量速度 (ms)，即间隔 speed 增长 step	number	200
color	进度条颜色	string	var(--el-color-primary)
stroke-width	进度条宽度	number	2