Element-UI MCP Server

## Progress 进度条 用于展示操作进度，告知用户当前状态和预期。 ### 线形进度条 :::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。通过 `format` 属性来指定进度条文字内容。 ```html <el-progress :percentage="50"></el-progress> <el-progress :percentage="100" :format="format"></el-progress> <el-progress :percentage="100" status="success"></el-progress> <el-progress :percentage="100" status="warning"></el-progress> <el-progress :percentage="50" status="exception"></el-progress> <script> export default { methods: { format(percentage) { return percentage === 100 ? '满' : `${percentage}%`; } } }; </script> ``` ::: ### 百分比内显 百分比不占用额外控件，适用于文件上传等场景。 :::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。 ```html <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress> <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress> <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress> ``` ::: ### 自定义颜色 可以通过 `color` 设置进度条的颜色，`color` 可以接受颜色字符串，函数和数组。 :::demo ```html <el-progress :percentage="percentage" :color="customColor"></el-progress> <el-progress :percentage="percentage" :color="customColorMethod"></el-progress> <el-progress :percentage="percentage" :color="customColors"></el-progress> <div> <el-button-group> <el-button icon="el-icon-minus" @click="decrease"></el-button> <el-button icon="el-icon-plus" @click="increase"></el-button> </el-button-group> </div> <script> export default { data() { return { percentage: 20, customColor: '#409eff', customColors: [ {color: '#f56c6c', percentage: 20}, {color: '#e6a23c', percentage: 40}, {color: '#5cb87a', percentage: 60}, {color: '#1989fa', percentage: 80}, {color: '#6f7ad3', percentage: 100} ] }; }, methods: { customColorMethod(percentage) { if (percentage < 30) { return '#909399'; } else if (percentage < 70) { return '#e6a23c'; } else { return '#67c23a'; } }, increase() { this.percentage += 10; if (this.percentage > 100) { this.percentage = 100; } }, decrease() { this.percentage -= 10; if (this.percentage < 0) { this.percentage = 0; } } } } </script> ``` ::: ### 环形进度条 Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。 :::demo ```html <el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress> <el-progress type="circle" :percentage="70" status="warning"></el-progress> <el-progress type="circle" :percentage="50" status="exception"></el-progress> ``` ::: ### 仪表盘形进度条 :::demo 通过 `type` 属性来指定使用仪表盘形进度条。 ```html <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress> <div> <el-button-group> <el-button icon="el-icon-minus" @click="decrease"></el-button> <el-button icon="el-icon-plus" @click="increase"></el-button> </el-button-group> </div> <script> export default { data() { return { percentage: 10, colors: [ {color: '#f56c6c', percentage: 20}, {color: '#e6a23c', percentage: 40}, {color: '#5cb87a', percentage: 60}, {color: '#1989fa', percentage: 80}, {color: '#6f7ad3', percentage: 100} ] }; }, methods: { increase() { this.percentage += 10; if (this.percentage > 100) { this.percentage = 100; } }, decrease() { this.percentage -= 10; if (this.percentage < 0) { this.percentage = 0; } } } } </script> ``` :::