6.8 进度条（Progress）

进度条组件

• 表明某个任务的当前进度
• 需要准确告知当前进度，否则应该使用 Loading

实例

基础用法

<template>
  <div class="dof-demo">
    <div class="wrap">
      <div class="demo first-demo">
        <text class="demo-text">默认</text>
        <dof-progress></dof-progress>
      </div>
      <div class="demo">
        <text class="demo-text">设置value</text>
        <dof-progress :value="50" :bar-width="600"></dof-progress>
      </div>
      <div class="demo">
        <text class="demo-text">自定义</text>
        <dof-progress :value="70" bar-color="#9B7B56" :bar-height="16" :bar-radius="16" :bar-width="640"></dof-progress>
      </div>
      <div class="btn" @click="uploadFile">
        <text class="btn-txt">上传文件</text>
      </div>
      <div class="up-demo" v-if="progressVisible">
        <text class="progress-text left">0%</text>
        <dof-progress :value="value" :bar-width="540"></dof-progress>
        <text class="progress-text right">{{ value }}%</text>
      </div>
    </div>
  </div>
</template>

<script>
import { DofProgress } from 'dolphin-intl-ui'

export default {
  components: { DofProgress },
  data: () => ({
    leftButton: '/assets/image/header/tab_back_white_1.png',
    value: 0,
    uploading: false,
    progressVisible: false,
    timer: null
  }),
  methods: {
    uploadFile() {
      if (!this.uploading) {
        this.value = 0
        this.uploading = true
        this.progressVisible = true
        this.timer = setInterval(() => {
          if (this.value < 100) {
            this.value++
          } else {
            this.uploading = false
            setTimeout(() => {
              this.progressVisible = false
            }, 500)
            clearTimeout(this.timer)
          }
        }, 10)
      }
    },
  }
}
</script>

Attributes

Prop	Type	Required	Default	Description
value	Number	N	0	百分比；小于 0 按 0 显示，大于 100 按 100 显示
bar-height	Number	N	8	高度
bar-width	Number	N	600	长度
bar-color	String	N	#00A4F2	进度颜色
bar-radius	Number	N	0	圆角
background-color	String	N	''	整体背景色
need-dark-mode	Boolean	N	false	是否启用 M-dark/T-dark 内置暗黑适配

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

仅默认轨道背景跟随暗黑色板，barColor 品牌色保留。