element plus on-progress使用方法

Element Plus是一个基于Vue.js的开源UI组件库，它提供了一个轻量级、易于使用的界面。on-progress这个属性通常用于`<el-loading>`组件，这是一个加载指示器，当数据加载时显示。使用方法如下：

<template>
  <div>
    <button @click="loadData">点击加载数据</button>
    <el-loading :visible="isLoading" type="text" on-progress="progressHandler">
      <!-- 加载内容 -->
    </el-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    loadData() {
      this.isLoading = true; // 开始加载时设置isLoading为true
      // 模拟异步请求
      setTimeout(() => {
        // 假设这里的loadData方法完成了数据加载
        this.loadDataCompleted();
      }, 2000);
    },
    loadDataCompleted() {
      this.isLoading = false; // 数据加载完成后设置isLoading为false
    },
    progressHandler(percentage) {
      console.log(`当前进度: ${percentage}%`);
    },
  },
};
</script>

在这个例子中，当你点击按钮时，`loadData`方法会被触发，开始加载时设置`isLoading`为`true`，同时传递给`on-progress`处理函数百分比。当数据加载完成时，会调用`loadDataCompleted`并关闭加载指示。