Progress 进度条

介绍

用于展示操作的当前进度。

引入

import { Progress } from 'mind-ui-vue';
Vue.use(Progress);

示例

基础用法

<m-progress :percent="50" @change="onChange" />

不同类型

通过 type 属性可以设置颜色类型，可选值为 primary、success、warning、danger 四种类型。

<m-progress type="primary" percent="50" />
<m-progress type="success" percent="50" />
<m-progress type="warning" percent="50" />
<m-progress type="danger" percent="50" />

自定义文字与颜色

可以使用 point-text 属性自定义文字，color 属性自定义进度条颜色。

<m-progress point-text="橙色" active-color="orange" :percent="25" />

自定义高度

滑槽的线宽，单位 px。

<m-progress :bar-height="30" :percent="50" />

不显示进度节点

<m-progress :point-visible="false" :percent="50" />

Api

Props

参数	说明	类型	可选值	默认值
percent	进度百分比	Number	-	-
type	类型	String	primary success warning danger	primary
bar-height	滑槽的线宽 / px	Number	-	6
active-color	进度条激活态颜色	String	-	-
point-visible	是否显示进度节点	Boolean	-	true
point-text	节点文字	Boolean	-	进度百分比
point-color	节点背景色	Boolean	-	同进度条颜色