v-progress 指令

介绍

v-progress 指令用于实现进度条效果。

基础方法

<template>
  <div
    v-progress:circle="{
      radius: 50,
      color: '#42b883',
      autoIncrement: {
        interval: 1000, // 1 秒
        step: 10 // 每次增加 10%
      },
      onReach: [{ percent: 100, callback: handleComplete, once: true }]
    }"
  ></div>
</template>

条形进度条

查看代码

<template>
  <!-- 条形进度条，每秒增加 10%，循环播放 -->
  <div
    v-progress:bar="{
      percent: 0,
      color: '#ff4757',
      autoIncrement: {
        interval: 1000, // 1 秒
        step: 10, // 每次增加 10%
        loop: true // 循环播放
      },
      onReach: [{ percent: 100, callback: handleComplete, once: true }]
    }"
  ></div>
</template>

<script lang="ts" setup>
import { vProgress } from '@cp-vuedir/core'
import { Message } from '@arco-design/web-vue'

function handleComplete() {
  Message.success('Progress complete!')
}
</script>

<style scoped>
div[v-progress] {
  margin: 20px 0;
}
</style>

圆形进度条

查看代码

<template>
  <!-- 圆形进度条，每秒增加 10% -->
  <div
    v-progress:circle="{
      radius: 50,
      color: '#42b883',
      autoIncrement: {
        interval: 1000, // 1 秒
        step: 10, // 每次增加 10%
        loop: true // 循环
      },
      onReach: [{ percent: 100, callback: handleComplete, once: true }]
    }"
  ></div>
</template>

<script lang="ts" setup>
import { vProgress } from '@cp-vuedir/core'
import { Message } from '@arco-design/web-vue'

function handleComplete() {
  Message.success('Progress complete!')
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 进度条容器样式 */
div[v-progress] {
  margin: 20px 0;
}
</style>

顶部滚动进度条

📜 滚动演示区域

试着向下滚动查看进度条效果 →

请看页面顶部 #1

请看页面顶部 #2

请看页面顶部 #3

请看页面顶部 #4

请看页面顶部 #5

请看页面顶部 #6

请看页面顶部 #7

请看页面顶部 #8

请看页面顶部 #9

请看页面顶部 #10

请看页面顶部 #11

请看页面顶部 #12

查看代码

<template>
  <div>
    <div
      class="container"
      v-progress:scroll="{
        color: 'red',
        height: 10,
        onReach: [{ percent: 100, callback: reachBottom, once: false }]
      }"
    >
      <h2 class="title">📜 滚动演示区域</h2>
      <div class="content">
        <p class="text">试着向下滚动查看进度条效果 →</p>
        <div v-for="i in 12" :key="i" class="content-block">
          <div class="skeleton"></div>
          <p class="placeholder-text">请看页面顶部 #{{ i }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { vProgress } from '@cp-vuedir/core'
import { Message } from '@arco-design/web-vue'

function reachBottom() {
  Message.info('已到达底部')
  // 实际项目中可以在这里添加数据加载逻辑
}
</script>

<style scoped>
.container {
  width: 90%;
  max-width: 600px;
  height: 60vh;
  margin: 2rem auto;
  overflow-y: auto;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.title {
  position: sticky;
  top: 0;
  background: var(--vp-c-bg-soft);
  padding: 1.2rem;
  margin: 0;
  color: #2c3e50;
  font-size: 1.4rem;
  text-align: center;
  z-index: 1;
  backdrop-filter: blur(2px);
}

.content {
  padding: 0 1.5rem 2rem;
}

.text {
  color: #7f8c8d;
  text-align: center;
  font-size: 0.9em;
  margin: 1em 0 2em;
}

.content-block {
  padding: 1.2rem;
  margin: 1rem 0;
  background: var(--vp-c-bg-soft);
  border-radius: 8px;
  transition: transform 0.2s;
}

.content-block:hover {
  transform: translateX(4px);
}

.skeleton {
  height: 100px;
  background: var(--vp-c-bg-soft);
  border-radius: 6px;
  margin-bottom: 0.8rem;
  animation: pulse 1.5s infinite;
}

.placeholder-text {
  color: #666;
  text-align: center;
  margin: 0;
  font-size: 0.9em;
}
</style>

API

属性名	说明	类型	是否必选	默认值
percent	进度百分比，可根据需要动态改变	Number	✓	-
radius	圆形进度条半径，只有进度条为圆形时生效	Number	○	45
strokeWidth	圆形进度条线条宽度，只有进度条为圆形时生效	Number	○	8
color	进度条颜色	String	○	#42b883
showText	是否显示进度百分比	Boolean	○	true
transition	进度条过渡动画	String	○	ease
autoIncrement	自动增加进度百分比	Object	○	false
interval	自动增加进度百分比的时间间隔(在 `autoIncrement` 对象中配置)	Number	○	1000
step	每次增加的百分比，在 (`autoIncrement` 对象中配置)	Number	○	10
loop	是否循环，在 (`autoIncrement` 对象中配置)	Boolean	○	false
onReach	进度条到达指定百分比时触发回调函数	Object[]	○	[]
percent	到达的百分比,触发回调的时机,(在 `onReach` 对象中配置)	Number	✓	100
callback	到达指定百分比时触发的回调函数,(在 `onReach` 对象中配置)	Function	✓	() => {}
once	是否只触发一次回调函数,(在 `onReach` 对象中配置)	Boolean	○	false

注意事项

注意

• 浏览器兼容性：vProgress 指令依赖于某些现代浏览器特性（SVG），确保你的目标浏览器支持这些特性。