element plus on-progress setup语法糖使用方法

Element Plus中的`<el-loading>`组件提供了一个便捷的`on-progress`属性，用于设置加载进度的回调函数。这个语法糖允许你在加载过程中动态更新进度条的状态。使用方法如下：

<template>
  <div>
    <el-loading :visible="isLoading" :on-progress="handleProgress">
      <!-- 加载内容 -->
    </el-loading>
    <button @click="startLoading">开始加载</button>
    <button @click="stopLoading">停止加载</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    startLoading() {
      this.isLoading = true; // 显示加载状态
    },
    stopLoading() {
      this.isLoading = false; // 隐藏加载状态或更新进度到完成
    },
    handleProgress(progress) {
      // 这里可以根据progress参数动态设置进度百分比，例如：
      if (progress >= 100) {
        this.stopLoading(); // 当进度达到100%时，停止加载
      }
    },
  },
};
</script>

在上述代码中，`on-progress`是一个回调函数，会在`<el-loading>`显示时立即执行一次，并且每次进度有变化时会再次触发。你可以通过`progress`参数获取当前的加载进度，然后根据需求调整UI。