feat: 添加进度条组件示例

locales/en.yaml

@@ -63,6 +63,7 @@ menus:
   hsTag: Tag
   hsStatistic: Statistic
   hsCollapse: Collapse
+  hsProgress: Progress
   hsmenus: MultiLevel Menu
   hsmenu1: Menu1
   hsmenu1-1: Menu1-1

locales/zh-CN.yaml

@@ -63,6 +63,7 @@ menus:
   hsTag: 标签
   hsStatistic: 统计组件
   hsCollapse: 折叠面板
+  hsProgress: 进度条
   hsmenus: 多级菜单
   hsmenu1: 菜单1
   hsmenu1-1: 菜单1-1

src/router/modules/components.ts

@@ -107,6 +107,14 @@ export default {
         title: $t("menus.hsbutton")
       }
     },
+    {
+      path: "/components/progress",
+      name: "PureProgress",
+      component: () => import("@/views/components/progress.vue"),
+      meta: {
+        title: $t("menus.hsProgress")
+      }
+    },
     {
       path: "/components/tag",
       name: "PureTag",

src/views/components/progress.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "PureProgress"
+});
+
+const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-link
+          v-tippy="{
+            content: '点击查看详细文档'
+          }"
+          href="https://element-plus.org/zh-CN/component/progress.html"
+          target="_blank"
+          style="font-size: 16px; font-weight: 800"
+        >
+          进度条
+        </el-link>
+      </div>
+    </template>
+
+    <p class="mb-4">直线进度条动画</p>
+    <div class="w-1/4">
+      <el-progress indeterminate :percentage="50" class="mb-4" />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        :format="format"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        status="success"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        status="warning"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="50"
+        status="exception"
+        class="mb-4"
+      />
+    </div>
+
+    <p class="mb-4">进度条内显示百分比标识</p>
+    <div class="w-1/4">
+      <el-progress
+        :text-inside="true"
+        :stroke-width="26"
+        :percentage="70"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="24"
+        :percentage="100"
+        status="success"
+        striped
+        striped-flow
+        :duration="70"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="22"
+        :percentage="80"
+        status="warning"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="20"
+        :percentage="50"
+        status="exception"
+        striped
+        striped-flow
+        class="mb-4"
+      />
+    </div>
+
+    <p class="mb-4">自定义内容</p>
+    <div class="w-1/4 demo-progress">
+      <el-progress :percentage="50">
+        <el-button text>自定义内容</el-button>
+      </el-progress>
+      <el-progress
+        :text-inside="true"
+        :stroke-width="20"
+        :percentage="50"
+        status="exception"
+      >
+        <span>自定义内容</span>
+      </el-progress>
+      <el-progress type="circle" :percentage="100" status="success">
+        <el-button type="success" :icon="useRenderIcon('ep:check')" circle />
+      </el-progress>
+      <el-progress type="dashboard" :percentage="80">
+        <template #default="{ percentage }">
+          <span class="percentage-value">{{ percentage }}%</span>
+          <span class="percentage-label">上升率</span>
+        </template>
+      </el-progress>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+.percentage-value {
+  display: block;
+  margin-top: 10px;
+  font-size: 28px;
+}
+
+.percentage-label {
+  display: block;
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.demo-progress .el-progress--line {
+  width: 350px;
+  margin-bottom: 15px;
+}
+
+.demo-progress .el-progress--circle {
+  margin-right: 15px;
+}
+</style>