Progress 进度

示例

进度条

Progress

Show description Autosucceed Indeterminate

66.6%

<template>
<article>
  <section class="settings">
    Progress
    <veui-slider
      v-model="value"
      class="slider"
      :min="0"
      :step="0.1"
      :max="100"
    />
  </section>
  <section class="settings">
    <veui-checkbox v-model="desc">
      Show description
    </veui-checkbox>
    <veui-checkbox
      v-model="autosucceed"
      :true-value="200"
    >
      Autosucceed
    </veui-checkbox>
    <veui-checkbox
      v-model="indeterminate"
    >
      Indeterminate
    </veui-checkbox>
  </section>
  <section>
    <veui-progress
      :value="value"
      :desc="desc"
      :autosucceed="autosucceed"
      :indeterminate="indeterminate"
      :decimal-place="1"
      :min="0"
      :max="100"
    />
  </section>
</article>
</template>

<script>
import { Progress, Slider, Checkbox } from 'veui'

export default {
  components: {
    'veui-progress': Progress,
    'veui-slider': Slider,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      type: 'bar',
      value: 66.6,
      desc: true,
      autosucceed: 200,
      indeterminate: false
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings {
  display: flex;
  align-items: center;
  gap: 20px;
}

.slider {
  width: 200px;
}
</style>

进度环

Progress

Show description Autosucceed

66.6%

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section class="settings">
    Progress
    <veui-slider
      v-model="value"
      class="slider"
      :min="0"
      :step="0.1"
      :max="100"
    />
  </section>
  <section class="settings">
    <veui-checkbox v-model="desc">
      Show description
    </veui-checkbox>
    <veui-checkbox
      v-model="autosucceed"
      :true-value="200"
    >
      Autosucceed
    </veui-checkbox>
  </section>
  <section>
    <veui-progress
      type="circular"
      :value="value"
      :desc="desc"
      :autosucceed="autosucceed"
      :decimal-place="1"
      :min="0"
      :max="100"
    />
  </section>
</article>
</template>

<script>
import { Progress, Slider, Checkbox } from 'veui'

export default {
  components: {
    'veui-progress': Progress,
    'veui-slider': Slider,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      value: 66.6,
      desc: true,
      autosucceed: 200
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings {
  display: flex;
  align-items: center;
  gap: 20px;
}

.slider {
  width: 200px;
}
</style>

尺寸

可供选用的尺寸 ui 属性值：xs / s / m。

Fluid layout (bar)

71%

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    <veui-checkbox v-model="fluid">
      Fluid layout (bar)
    </veui-checkbox>
  </section>
  <section class="bar">
    <veui-progress
      :ui="`m ${fluid ? 'fluid' : ''}`"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
    <veui-progress
      :ui="`s ${fluid ? 'fluid' : ''}`"
      status="success"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
    <veui-progress
      :ui="`xs ${fluid ? 'fluid' : ''}`"
      status="error"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
  </section>
  <section class="circular">
    <veui-progress
      type="circular"
      ui="m"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
    <veui-progress
      type="circular"
      ui="s"
      status="success"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
    <veui-progress
      type="circular"
      ui="xs"
      status="error"
      :value="71.1"
      :min="0"
      :max="100"
      desc
    />
  </section>
</article>
</template>

<script>
import { Progress, Checkbox } from 'veui'

export default {
  components: {
    'veui-progress': Progress,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      fluid: false
    }
  }
}
</script>

<style lang="less" scoped>
section + section {
  margin-top: 20px;
}

.bar,
.circular {
  display: flex;
  gap: 20px;
}

.bar {
  flex-direction: column;
}
</style>

API

属性

名称类型默认值描述

ui

string

预设样式。

值	描述
`fluid`	柱状进度条自适应宽度样式。
`xs`	超小尺寸样式。
`s`	小尺寸样式。
`m`	中尺寸样式。

type string 'bar' 进度条类型。可选值为 bar / circular，分别是柱状和环形。

desc boolean false 是否显示文字提示。

value number 0 进度值。

min number 0 最小值。

max number 1 最大值。

decimal-place number 0 保留的小数位数。

status

string

.sync

进度状态。可选值为 success / error，分别表示成功及错误状态。

autosucceed boolean | number - 是否在进度值到达最大时自动进入 success 状态。true 表示直接进入成功状态，如果是 number 类型则表示在到达最大值后切换为成功状态前等待的毫秒数。

indeterminate boolean false 是否不确定进度，目前仅支持在 type 为 bar 时生效。

插槽

名称描述

default

可用来定制文字提示区域的内容。

默认内容：完成率百分比。

名称	类型	描述
`percent`	`number`	进度完成百分比。
`value`	`number`	进度值，同 `value` 属性。
`status`	`string`	进度状态，同 `status` 属性。

after 可用来定制文字提示区域之后的内容，插槽参数参考 default 插槽。

在 GitHub 上编辑此页面编辑