VEUI

VEUI on GitHub
中文

Progress 进度

Demos

Progress bar

Progress
66.6%
Edit this demo on GitHubEdit
<template>
<article>
  <section class="settings">
    Progress
    <veui-slider
      v-model="value"
      :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;
}

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

Progress circles

Progress
66.6%
Edit this demo on GitHubEdit
<template>
<article>
  <section class="settings">
    Progress
    <veui-slider
      v-model="value"
      :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;
}

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

Size variants

Available size variants for the ui prop: xs / s / m.

71%
71%
Edit this demo on GitHubEdit
<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

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
fluidFluid layout for progress bar.
xsExtra small.
sSmall.
mMedium.
typestring'bar'The type of the progress. Available values are bar / circular, denoting progress bar and progress circle respectively.
descbooleanfalseThe description of the progress.
valuenumber0Progress value.
minnumber0Minimum value.
maxnumber1Max value.
decimal-placenumber0Decimal place for the progress value.
statusstring-

.sync

The status of the progress. Available values are success / error, denoting success and error status respectively.

autosucceedboolean | number-Whether automatically enter the success status when the progress reaches the maximum value. true denotes entering immediately, while number values denotes the delay in milliseconds before entering the success status.
indeterminatebooleanfalseWhether the progress is indeterminate. Currently only works when type is bar.

Slots

NameDescription
default

The description content. Displays the percentage value of the progress by default.

NameTypeDescription
percentnumberThe percentage value of the progress.
valuenumberThe value of the progress, same as the value prop.
statusstringThe status of the progress, same as the status prop.
Edit this page on GitHubEdit
© Baidu, Inc. 2023