跳转到内容

进度条

使用el-slider或el-progress组件,用于展示操作进度,告知用户当前状态和预期,并且直线进度条是可编辑的。支持编辑器类型包含:滑动输入条

示例效果

输入参数

名称说明类型默认值
value编辑器值[String, Number]-
controller编辑器控制器对象new RequiredProp(Object as PropType<C>)-
data容器数据,通常为表单数据,表格行数据,面板数据new RequiredProp(Object as PropType<IData>)-
disabled是否禁用{ type: Boolean }false
readonly是否只读{ type: Boolean, default: false }false
controlParams容器控件参数,一般是指表单部件控件参数、表格控件参数、面板控件参数{ type: Object, required: false }-

事件

名称说明类型
change值变更事件{_value:V, _name?:string, _ignore?:boolean}

编辑器参数

名称说明类型默认值
type'line' 绘制直线进度条、'circle' 绘制环形进度条、'pie' 绘制饼图进度条'line' | 'circle' | 'pie''line'
stepvaluetype 为 'line' 时,设置进度条改变的步长,el-slider组件的step属性number1
maxvaluetype 为 'line' 时,设置进度条允许的最大值,el-slider组件的max属性number100
minvaluetype 为 'line' 时,设置进度条允许的最小值,el-slider组件的min属性number0
showstopstype 为 'line' 时,是否显示间断点,el-slider组件的show-stops属性booleanfalse
rangetype 为 'line' 时,是否开启选择范围,el-slider组件的range属性booleanfalse
showinputtype 为 'line' 时,是否显示输入框,仅在非范围选择时有效,el-slider组件的show-input属性booleanfalse
showtexttype 为 'line' 或 'circle' 时,是否显示文本booleanfalse
formattype 为 'line' 或 'circle' 时,设置显示文本的格式string'0%'
textitemtype 为 'line' 或 'circle' 时,设置显示文本属性。设置后,环形进度条的显示文本将优先获取主数据内对应属性的数据进行展示stringundefined
piebgtype 为 'pie' 时,设置饼图进度条背景色,可配置十六进制颜色、rgb颜色stringundefined
piepercentbgtype 为 'pie' 时,设置饼图进度条占比背景色,可配置十六进制颜色、rgb颜色stringundefined
readonly设置编辑器是否为只读态booleanfalse
未来已来,立即拥抱应用融合的力量
Released under the MIT License.