进度条
使用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' |
| stepvalue | 当 type 为 'line' 时,设置进度条改变的步长,el-slider组件的step属性 | number | 1 |
| maxvalue | 当 type 为 'line' 时,设置进度条允许的最大值,el-slider组件的max属性 | number | 100 |
| minvalue | 当 type 为 'line' 时,设置进度条允许的最小值,el-slider组件的min属性 | number | 0 |
| showstops | 当 type 为 'line' 时,是否显示间断点,el-slider组件的show-stops属性 | boolean | false |
| range | 当 type 为 'line' 时,是否开启选择范围,el-slider组件的range属性 | boolean | false |
| showinput | 当 type 为 'line' 时,是否显示输入框,仅在非范围选择时有效,el-slider组件的show-input属性 | boolean | false |
| showtext | 当 type 为 'line' 或 'circle' 时,是否显示文本 | boolean | false |
| format | 当 type 为 'line' 或 'circle' 时,设置显示文本的格式 | string | '0%' |
| textitem | 当 type 为 'line' 或 'circle' 时,设置显示文本属性。设置后,环形进度条的显示文本将优先获取主数据内对应属性的数据进行展示 | string | undefined |
| piebg | 当 type 为 'pie' 时,设置饼图进度条背景色,可配置十六进制颜色、rgb颜色 | string | undefined |
| piepercentbg | 当 type 为 'pie' 时,设置饼图进度条占比背景色,可配置十六进制颜色、rgb颜色 | string | undefined |
| readonly | 设置编辑器是否为只读态 | boolean | false |