如何使用elementui实现一个根据页面进度实时增长/前进的进度条

如何使用elementui实现一个根据页面进度实时增长/前进的进度条，当用户点击已完成进度条部分的任何一个值时，例如已完成70%点击35%可以跳到35%时对应的页面呢？

javascript 复制代码

<template>
  <div>
    <el-progress :percentage="progressPercentage" :text-inside="true" stroke-width="6" />
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    // 模拟进度值，这里可以根据实际情况计算页面进度
    const progressPercentage = ref(0);
    // 模拟页面滚动事件监听，这里只是示例，实际需要根据页面滚动监听来更新进度
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const percentage = Math.min((scrollTop / scrollHeight) * 100, 100);
      progressPercentage.value = percentage;
    });
    // 处理进度条点击跳转
    const handleProgressClick = (event) => {
      const rect = event.target.getBoundingClientRect();
      const clickPosition = event.clientX - rect.left;
      const percentage = (clickPosition / rect.width) * 100;
      // 模拟跳转到对应进度的页面位置，这里只是示例，实际需要实现页面跳转逻辑
      console.log(`点击进度条 ${percentage}%，跳转到对应位置`);
    };
    return {
      progressPercentage,
      handleProgressClick,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据实际需求调整 */
</style>

在上述代码中，我们使用了 Element UI 的 el-progress 组件来展示进度条。通过监听页面滚动事件来实时更新进度条的百分比。同时，添加了一个点击事件处理函数 handleProgressClick，当用户点击进度条时，计算点击位置对应的百分比，并可以根据这个百分比实现页面跳转的逻辑（这里只是打印了跳转信息，实际中需要根据具体需求实现页面跳转）。

请注意，这只是一个简单的示例，实际应用中需要根据具体的页面结构和需求进行调整和完善。

让我们来进阶一下

如何将 Element UI 进度条与其他组件集成？

javascript 复制代码

以下是一些将 Element UI 进度条与其他组件集成的方法：
一、与列表组件集成
假设你有一个列表组件，想要根据列表项的完成状态显示进度条。
模板部分：
html

<template>
  <div>
    <ul>
      <li v-for="item in listItems" :key="item.id">
        {{ item.name }}
        <el-progress :percentage="calculatePercentage(item)" :text-inside="true" stroke-width="6" />
      </li>
    </ul>
  </div>
</template>
脚本部分：
javascript

import { ref } from 'vue';
export default {
  setup() {
    const listItems = ref([
      { id: 1, name: 'Item 1', completed: 50 },
      { id: 2, name: 'Item 2', completed: 80 },
    ]);
    const calculatePercentage = (item) => {
      return item.completed;
    };
    return {
      listItems,
      calculatePercentage,
    };
  },
};
在这个例子中，根据每个列表项的 completed 属性来计算进度条的百分比。
二、与表单组件集成
例如，在一个表单提交过程中显示进度条。
模板部分：
html

<template>
  <div>
    <form @submit.prevent="submitForm">
      <!-- 表单输入项 -->
      <button type="submit">提交</button>
    </form>
    <el-progress v-if="isSubmitting" :percentage="formProgressPercentage" :text-inside="true" stroke-width="6" />
  </div>
</template>
脚本部分：
javascript

import { ref } from 'vue';
export default {
  setup() {
    const isSubmitting = ref(false);
    const formProgressPercentage = ref(0);
    const submitForm = async () => {
      isSubmitting.value = true;
      // 模拟表单提交过程
      for (let i = 0; i <= 100; i++) {
        formProgressPercentage.value = i;
        await new Promise((resolve) => setTimeout(resolve, 50));
      }
      isSubmitting.value = false;
    };
    return {
      isSubmitting,
      formProgressPercentage,
      submitForm,
    };
  },
};
这里在表单提交时显示进度条，并模拟一个从 0 到 100 的进度变化过程。
三、与路由切换集成
可以在路由切换过程中显示进度条。
安装 nprogress 库来显示页面加载进度条：


   npm install nprogress
在 Vue 项目的入口文件（通常是 main.js）中引入并配置：
javascript

   import NProgress from 'nprogress';
   import 'nprogress/nprogress.css';

   // 在路由导航守卫中显示和隐藏进度条
   router.beforeEach((to, from, next) => {
     NProgress.start();
     next();
   });

   router.afterEach(() => {
     NProgress.done();
   });

这样在路由切换时会显示一个顶部进度条。

这些只是一些基本的集成方法，你可以根据具体的业务需求进行更多的扩展和定制。