使用Vue开发UI组件：Progress进度条组件

进度条在很多 Web APP 中都有使用，文本整理介绍 progress 是进度条组件的开发和使用。

开发

先看进度条组件的模板定义。

<template>
  <div class="sprogress" :class="classes">
    <div class="pgs-info" v-if="infoAll">
      <span class="pgs-title">{{text}}</span>
      <span class="pgs-percent">{{percent.toFixed(fixed)}}%</span>
    </div>
    <div class="pgs-cnt">
      <div class="pgs-bar" :style="barStyles"></div>
    </div>
    <div class="pgs-percent" v-if="!infoAll && infoPercent">{{percent.toFixed(fixed)}}%</div>
  </div>
</template>

与之前的组件一样，组件的外观样式由 classes 控制，classes 由计算属性获得。

computed: {
    classes() {
        return [
            `pgs-{this.color}`,
            `pgs-{this.size}`,
            {'pgs-show-percent': this.infoAll ? false : this.infoPercent},
            {'pgs-show-all': this.infoAll},
            {'pgs-is-sharp': this.sharp},
        ];
    },
    barStyles() {
        return [
            {'width': this.percent + "%"}
        ]
    }
}

使用

直接在外部组件引入 progress 即可。

<sprogress text="进度条" :percent="progressPercent" color="danger" size="small" :fixed="2" infoAll></sprogress>

下面是进度条组件的引用示例。

属性：color

color 属性用来设置进度条的外在样式。

属性值	释义	引用
default	default色	</sprogress color="default"/>
primary	primary色	</sprogress color="primary"/>
warning	warning色	</sprogress color="warning"/>
info	info色	</sprogress color="info"/>
success	success色	</sprogress color="success"/>
danger	danger色	</sprogress color="danger"/>

下面是几种不同颜色的外观视图。

属性：size

size 属性用来设置进度条的尺寸。

属性值	释义	引用
middle	文本输入框	</sprogress size="middle"/>
small	数字输入框	</sprogress size="small"/>
large	密码输入框	</sprogress size="large"/>

下面是不同尺寸的进度条视图。

属性：text

text 属性设置进度条的显示问题，用于向用户提示，可以设置为进度的表示文字，或者一个简单的标题。

属性：percent

percent 设置进度条的进度值，最小值为 0 ，最大值为 100 。

属性：fixed

fixed 属性用来设置进度条进度值的小数位数，为了值为 2 ，表示保留 2 位小数。

属性：infoAll

infoAll 用来设置进度条是否显示全部信息。

属性：infoPercent

infoPercent 设置进度条是否显示进度百分比。

下图示例进度条的不同样式，由 infoAll 和 infoPercent 值决定。

属性：sharp

sharp 属性用来设置进度条是否禁用圆角。

下图示例进度条的 sharp 属性。