Progress 进度条

QR

扫二维码查看演示效果

表明某个任务的当前进度。

规则

• 需要准确告知当前进度，否则应该使用组件 ActivityIndicator。
• 和 NavBar 一起搭配使用时，可以隐藏 Progress 未填充部分的轨道，提升整体感。

Code Example

<template>
  <div>
    <WingBlank>
      <h3>基本</h3>
    </WingBlank>
    <Progress :percent="30"></progress>
    <WhiteSpace size="lg"></WhiteSpace>
    <Progress :percent="40" :unfilled="false" position="normal" appearTransition></progress>
    <div class="show-info">
      <div class="progress">
        <Progress :percent="percent"  position="normal"></progress>
      </div>
      <div aria-hidden="true">{{percent}}%</div>
    </div>
    <WhiteSpace size="xl"></WhiteSpace>
    <WingBlank>
      <Button @onClick="add">(+-)10</Button>
    </WingBlank>
  </div>
</template>

<script>
import Progress from '@/components/progress'
import WhiteSpace from '@/components/white-space'
import WingBlank from '@/components/wing-blank'
import Button from '@/components/button'

export default {
  components: {
    Progress,
    WhiteSpace,
    WingBlank,
    Button
  },
  data () {
    return {
      percent: 50
    }
  },
  methods: {
    add () {
      let p = this.percent + 10
      if (this.percent >= 100) {
        p = 0
      }
      this.percent = p
    }
  }
}
</script>
<style>
.show-info {
  margin-top: 18px;
  display: flex;
  align-items: center;
}
.show-info .progress {
  margin-right: 5px;
  width: 100%;
}
</style>

props

属性	说明	类型	默认值
percent	进度百分比	number	0
position	进度条的位置，fixed 将浮出固定在最顶层，可选: fixed normal	string	fixed
unfilled	是否隐藏未填充轨道	boolean	true

https://ladybirddev.github.io/ui-nuclear-mobile-demo/#/progress