Element 2 组件Progress扩展-仪表盘缺口大小/位置

lxf2023-05-05 07:11:01

首页 > vue
> 正文

携手创作，共同成长！这是我参与「AdminJS · 8 月更文挑战」的第4天，点击查看活动详情

简介

前文深入解读了线性环形/仪表盘进度条的代码实现。虽然组件提供了很多属性用来满足不同使用场景的下差异化配置，但是还缺少一些特性，例如自定义进度条渐变色、仪表盘缺口大小、仪表盘缺口位置、分段进度条等。

接下来在源码的基础上，编码实现一些新特性，丰富组件功能。

仪表盘缺口大小

组件新增属性gapPercentage,用于设置仪表盘进度缺口弧长所站百分比。数值范围根据实际情况可以设置。这里改写支持 dashboard 设置为 0,等同于圆形进度条(进度起始位置在底部)。

gapPercentage: {
  type: Number,
  validator: val => val >= 0 && val < 100
},

源码可知仪表盘的缺口的弧长为四分之一(1-0.75 即 25%)圆周长。

rate() {
  return this.type === 'dashboard' ? 0.75 : 1;
},
trailPathStyle() {
  return {
    strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
    strokeDashoffset: this.strokeDashoffset
  };
},

新增计算属性 gapPer 返回缺口弧长(百分比),默认情况 dashboard类型的缺口弧长为 25% 。

gapPer() {
  // Support gapDeg = 0 when type = 'dashboard'
  if (this.gapPercentage || this.gapPercentage === 0) {
    return this.gapPercentage;
  }
  if (this.type === 'dashboard') {
    return 25;
  }
  return undefined;
},

改写计算属性 rate。

rate() {
  return 1 - (this.gapPer || 0) / 100;
},

组件代码示例：

<el-progress type="dashboard" :percentage="20"></el-progress>
<el-progress type="dashboard" :percentage="20" :gapPercentage="0"></el-progress>
<el-progress type="dashboard" :percentage="20" :gapPercentage="50"></el-progress>
<el-progress type="dashboard" :percentage="20" :gapPercentage="75"></el-progress>

运行结果如下：

Element 2 组件Progress扩展-仪表盘缺口大小/位置

仪表盘缺口位置

组件新增属性gapPosition,用于设置仪表盘进度条缺口位置，支持top 、bottom 、left、 right选型。默认情况下为 bottom。

gapPosition: {
  type: String,
  validator: val => ['top', 'bottom', 'left', 'right'].indexOf(val) > -1
}

缺口的位置实际上等同于路径绘制开始的位置，默认情况下圆形是top,仪表盘是bottom。所以新增计算属性gapPos返回路径开始绘制位置。

gapPos() {
  return this.gapPosition || (this.type === 'dashboard' && 'bottom') || 'top';
},

更新计算按属性trackPath逻辑，默认声明 top位置下的起始点(beginPositionX,beginPositionY) 结束点(endPositionX,endPositionY)，都是相对坐标。

然后根据不同位置，调整点位数值。

位置 top bottom 为 y轴方向，点位的 x 坐标为 0。
位置 left, right 为 x轴方向，点位的 y 坐标为 0。

最后生成路径创建指令。

trackPath() {
  const radius = this.radius; 
  // top
  let beginPositionX = 0;
  let beginPositionY = -radius;
  let endPositionX = 0;
  let endPositionY = -2 * radius;
  
  switch (this.gapPos) {
    case 'left':
      beginPositionX = -radius;
      beginPositionY = 0;
      endPositionX = 2 * radius;
      endPositionY = 0;
      break;
    case 'right':
      beginPositionX = radius;
      beginPositionY = 0;
      endPositionX = -2 * radius;
      endPositionY = 0;
      break;
    case 'bottom':
      beginPositionY = radius;
      endPositionY = 2 * radius;
      break;
    default:
  }

  return `
    M 50 50
    m ${beginPositionX},${beginPositionY}
    a ${radius} ${radius} 0 1 1 ${endPositionX},${-endPositionY}
    a ${radius} ${radius} 0 1 1 ${-endPositionX},${endPositionY}
    `;
},

组件代码示例：

<el-progress type="dashboard" :percentage="20"></el-progress>
<el-progress type="dashboard" :percentage="20" :gapPosition="'top'"></el-progress>
<el-progress type="dashboard" :percentage="20" :gapPosition="'left'"></el-progress>
<el-progress type="dashboard" :percentage="20" :gapPosition="'right'"></el-progress>