`元素渲染外显文字内容。
到此组件主要实现结构已经介绍完毕，接下来将分析各功能源码实现逻辑。
### 线形进度条
线形进度条，提供了进度百分比显示、文字内显/外显、文字内容格式化、自定义颜色等功能。
组件 DOM 结构如下图： 
* 1️⃣ `el-progress` 组件根节点
* 2️⃣ `el-progress-bar` 线形进度条节点
* 3️⃣ `el-progress-bar__outer` 进度条背景
* 4️⃣ `el-progress-bar__inner` 进度显示
* 5️⃣ `el-progress-bar__innerText` 内显文字
* 6️⃣ `el-progress__text` 外显文字
```html
```
#### 1️⃣
根据组件设定的属性值绑定组件样式： 进度条类型、进度条状态 、不显示进度条文字、文字显示位置（内置/外部）。
#### 2️⃣
当传入`type`值为`line`或不设置 `type`时，组件渲染成线形进度条。
#### 3️⃣
属性`strokeWidth`用于设置进度条背景的高度。
#### 4️⃣
计算属性`barStyle`用于控制进度条进度和颜色。
`barStyle`根据 `percentage` 属性值动态生成样式对象 `{ width: "80%" , backgroundColor: "" }`。 进度显示通过宽度百分比控制，此处的 `backgroundColor` 为自定义颜色值（会覆盖 status 状态颜色），默认情况为空。
```js
barStyle() {
const style = {};
style.width = this.percentage + '%';
style.backgroundColor = this.getCurrentColor(this.percentage);
return style;
},
```
***
#### 自定义颜色
方法 `getCurrentColor`用于自定义进度条颜色，通过判断属性 `color` 值的类型实现各自逻辑处理。
`color` 可以接受颜色字符串，函数和数组。
* 若值为函数，函数第一参数应传入 `percentage` 属性值 （格式`function(percentage)`），直接调用函数即可`this.color(percentage)`。
* 若值为字符串，直接返回属性值 `this.color`，`color` 默认值为`""`, 不设置该属性，默认情况下执行此逻辑。
* 若值为数组（字符串或对象数组），根据 `percentage` 所属范围，返回对应颜色。
若值为数组,则调用方法 `getLevelColor` 。
```js
getCurrentColor(percentage) {
if (typeof this.color === 'function') {
return this.color(percentage);
} else if (typeof this.color === 'string') {
return this.color;
} else {
return this.getLevelColor(percentage);
}
},
```
方法 `getColorArray`，返回对象数组，定义不同数值范围的背景颜色。若字符串数组，方法根据数组长度，自动切分构建成对象数组 `[{ color: "#f56c6c", percentage: 20 }]`。 若传入对象数组，对象格式应为 `{ color: string, percentage: number }`。
```js
getColorArray() {
const color = this.color;
const span = 100 / color.length;
return color.map((seriesColor, index) => {
// 字符串数组，构建成对象数组
if (typeof seriesColor === 'string') {
return {
color: seriesColor,
percentage: (index + 1) * span
};
}
return seriesColor;
});
}
// [
// { color: "#f56c6c", percentage: 20 },
// { color: "#e6a23c", percentage: 40 },
// { color: "#5cb87a", percentage: 60 },
// { color: "#1989fa", percentage: 80 },
// { color: "#6f7ad3", percentage: 100 },
// ]
```
方法 `getLevelColor`中调用方法`getColorArray`并排序，比对`percentage`属于哪一区间，返回对应的背景颜色。
```js
getLevelColor(percentage) {
const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage);
for (let i = 0; i < colorArray.length; i++) {
if (colorArray[i].percentage > percentage) {
return colorArray[i].color;
}
}
return colorArray[colorArray.length - 1].color;
},
```
因为比较使用了`>`,例如 `percentage` 值 100 时, 就会执行`return colorArray[colorArray.length - 1].color;` 返回数组最后对象的颜色。
```html
```
***
#### 5️⃣
内显内容计算属性 `content`。默认按照 `[percentage]%`格式显示进度百分比。 若设置了属性`format`,则使用函数处理返回文字内容。
组件通过属性 `showText` 、 `textInside` 控制文字显示状态和位置。
```js
content() {
if (typeof this.format === 'function') {
return this.format(this.percentage) || '';
} else {
return `${this.percentage}%`;
}
}
```
#### 6️⃣
外显内容跟内显一样，计算属性`content`。若设置了进度条状态`status`，则显示图标。
```html
{{content}}
```
计算属性 `iconClass` 返回不同状态 `success/exception/warning`的 icon, 不同类型下`success/exception` 对应图标有所区别。
```js
iconClass() {
if (this.status === 'warning') {
return 'el-icon-warning';
}
if (this.type === 'line') {
return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
} else {
return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
}
},
```
使用计算属性`progressTextSize`控制字体大小。 当类型为`line`时，基于进度条高度-属性`strokeWidth`；当类型为`circle/dashboard`时，基于环形进度条画布宽度-属性`width`。
```js
progressTextSize() {
return this.type === 'line'
? 12 + this.strokeWidth * 0.4
: this.width * 0.111111 + 2 ;
},
```
#### 自定义文字格式
```html
// format 示例
```
### 组件样式
组件样式源码 `packages\theme-chalk\src\progress.scss` 使用 `scss` 的混合指令 `b`、 `e`、 `m`、 `when` 嵌套生成组件样式。
```
// 生成 .el-progress
@include b(progress) {
// ...
// 生成 .el-progress__text
@include e(text) {
// ...
// 生成 .el-progress__text i
i {
// ...
}
}
// 生成 .el-progress--circle, .el-progress--dashboard
@include m((circle,dashboard)) {
// ...
// 生成
// .el-progress--circle .el-progress__text,
// .el-progress--dashboard .el-progress__text
.el-progress__text {
// ...
// 生成
// .el-progress--circle .el-progress__text i,
// .el-progress--dashboard .el-progress__text i
i {
// ...
}
}
}
@include m(without-text) {
// 生成 .el-progress--without-text .el-progress__text
.el-progress__text {
// ...
}
// 生成 .el-progress--without-text .el-progress-bar
.el-progress-bar {
// ...
}
}
@include m(text-inside) {
// 生成 .el-progress--text-inside .el-progress-bar
.el-progress-bar {
// ...
}
}
// 状态样式
@include when(success) {
// 生成 .el-progress.is-success .el-progress-bar__inner
.el-progress-bar__inner {
// ...
}
// 生成 .el-progress.is-success .el-progress-bar__text
.el-progress__text {
// ...
}
}
@include when(warning) {
// ...
}
@include when(exception) {
// ...
}
}
// 生成 .el-progress-bar
@include b(progress-bar) {
// ...
// 生成 .el-progress-bar__outer
@include e(outer) {
// ...
}
// 生成 .el-progress-bar__inner
@include e(inner) {
// ...
// 生成 .el-progress-bar__inner::after
@include utils-vertical-center;
}
// 生成 .el-progress-bar__innerText
@include e(innerText) {
// ...
}
}
// 该关键帧规则 代码中没有生效
@keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: 32px 0;
}
}
```
在类`.el-progress-bar__inner` 定义了默认进度条颜色 `background-color: #409eff;`。
若指定了组件状态，会生成样式覆盖掉默认颜色。同时制定了外显文本的字体图标颜色。
```css
// success/exception/warning
.el-progress.is-success .el-progress-bar__inner {
background-color: #67c23a;
}
.el-progress.is-success .el-progress__text {
color: #67c23a;
}
```
若是使用属性`color`自定义颜色，会生成内联样式，会覆盖 status 状态颜色。
内显文本居右对齐，属性是在`.el-progress-bar__inner`的定义的。
```css
.el-progress-bar__inner {
text-align: right;
// ...
}
```
### 环形/仪表盘进度条
环形/仪表盘进度条实现主要使用了`