VEUI

VEUI on GitHub
Play!EnglishEN

Progress 进度

示例

进度条

Progress
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>
    <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
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

71%
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

属性

名称类型默认值描述
uistring-

预设样式。

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

.sync

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

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

插槽

名称描述
default

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

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

名称类型描述
percentnumber进度完成百分比。
valuenumber进度值,同 value 属性。
statusstring进度状态,同 status 属性。
after可用来定制文字提示区域之后的内容,插槽参数参考 default 插槽。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024