Progress 进度条

示例

66.6%
在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-number-input
      v-model="value"
      :min="0"
      :decimal-place="1"
      :max="100"
    />
  </section>
  <section>
    <veui-checkbox v-model="desc">
      Description
    </veui-checkbox>
    <veui-checkbox
      v-model="autoSucceed"
      :true-value="200"
    >
      Autosucceed
    </veui-checkbox>
    <veui-checkbox
      v-model="type"
      true-value="circular"
      false-value="bar"
    >
      Circular
    </veui-checkbox>
    <veui-checkbox
      v-model="indeterminate"
    >
      Indeterminate
    </veui-checkbox>
  </section>
  <section>
    <veui-progress
      :type="type"
      :value="value"
      :desc="desc"
      :autosucceed="autoSucceed"
      :indeterminate="indeterminate"
      :decimal-place="1"
      :min="0"
      :max="100"
    />
  </section>
</article>
</template>

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

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

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

section:last-child {
  height: 140px;
}

.veui-checkbox {
  margin-right: 15px;
}
</style>

API

属性

名称类型默认值描述
uistring=-

预设样式。

描述
fluid柱状进度条自适应宽度样式。
s小尺寸样式。
m中尺寸样式。
typestring'bar'进度条类型。可选值为 bar / circular,分别是柱状和环形。
descbooleanfalse是否显示文字提示。
valuenumber0进度值。
minnumber0最小值。
maxnumber1最大值。
decimal-placenumber0保留的小数位数。
statusstring-

.sync

进度状态。可选值为 success / alert,分别表示成功及危险警告状态。

autosucceedboolean | number-是否在进度值到达最大时自动进入 success 状态。true 表示直接进入成功状态,如果是 number 类型则表示在到达最大值后切换为成功状态前等待的毫秒数。
indeterminatebooleanfalse是否不确定进度,目前仅支持在 typebar 时生效。

插槽

名称描述
default

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

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

名称类型描述
percentnumber进度完成百分比。
valuenumber进度值,同 value 属性。
statusstring进度状态,同 status 属性。
在 GitHub 上编辑此页编辑