dy-ui组件库之一个进度条

1 捏造组件

1.1、组件技术

接着上一篇文章，选择vue-cli、typeScript搭建项目骨架。选择如下：

TS规则依旧是TSLint，测试选择mocha + chai,项目搭建完成后，将不必要文件夹删除，具体可参照上一篇文章，其他不过多赘述。

1.2、造轮子

其实，最好的组件参照就是撸组件库源码。在此，以element-ui组件库为参照，详解基础组件构造。 一打开element-ui源码，没有接触过的可能会有一些蒙圈，因为element已经算是一个高度完善的组件库了，里面包含了翻译语言、组件库文档、组件测试等。目前我们可以只看packages文件夹下的progress文件夹。

参照element-ui官网，找到进度条组件下的Attributes。可以发现，组件所需设置的参数。我们以percentage为例。 在自己的packages文件夹下新建progress组件。先把进度条样子编写出来。可以看到进度条是由两个div叠加形成的，

<div class="dy-progress-bar">
      <div
        class="dy-progress-bar_outer"
        :style="{ height: strokeWidth + 'px' }"
      >
        <div class="dy-progress-bar_inner" :style="barStyle"></div>
      </div>
    </div>
<style lang="scss">
  .dy-progress-bar {
  margin-right  : -55px;
  box-sizing    : border-box;
  padding-right : 50px;
  width         : 100%;
  display       : inline-block;
  vertical-align: middle;
  .dy-progress-bar_outer {
    border-radius   : 100px;
    background-color: #dcdfe6;
    overflow        : hidden;
    position        : relative;
    vertical-align  : middle;
  }
}
.dy-progress-bar_inner {
  position     : absolute;
  left         : 0;
  top          : 0;
  height       : 100%;
  text-align   : right;
  border-radius: 100px;
  line-height  : 1;
  white-space  : nowrap;
  transition   : width .6s ease;
  background   : #409eff;
}
<style>

骨架搭好之后，设置组件接收percentage参数。那么Prop传参设置好，参数又怎么控制进度条的呢？ 在此，可以看到内部div绑定了一个样式:style="barStyle"。我们可以使用计算属性来控制div的长短。

get barStyle() {
    let styles: any = {};
    styles.width = this.percentage + '%';
    styles.background = this.getCurrentColor(this.percentage);
    return styles;
  }

内部div的宽度占外部div整个宽度的百分之几，就是内部div的长度。这样就可以通过percentage这个参数控制。 在此也可以控制进度条的背景色color，设置组件接收color参数。可以通过官网发现colr可以存在三种类型，那么需要在定义时将color设置为string | Function | colorArrary[]。colorArrary类型数组可以是自定义的数组类型，模仿element数组格式，将colorArrary内部设置成color与percentage。

interface colorArrary {
  color: string;
  percentage: number;
}

在barStyle中，设置背景色的函数为getCurrentColor。在函数中需要判断接收的color是何种类型，如果是Function类型的话可以直接返回函数，用户可以自己定义；如果是string类型直接返回color变量；如果是Arrary类型，需要做一些处理。处理函数如getLevelColor。getColorArrary将接收到的数组，将整个div长度除以数组长度划分成一份span，再将每个元素乘以一份span，这样数组就可以获取到相对应的长度占比。通过长度不同（percentage增减）显示不同的进度条颜色。

private getCurrentColor(per: number) {
    if (typeof this.color === 'function') {
      return this.color(per);
    } else if (typeof this.color === 'string') {
      return this.color;
    } else {
      return this.getLevelColor(per);
    }
  }
  private getLevelColor(per: number) {
    let colorArr: colorArrary[] = this.getColorArrary().sort(
      (a: colorArrary, b: colorArrary) => a.percentage - b.percentage,
    );
    colorArr.forEach((_: colorArrary) => {
      if (_.percentage > per) {
        return _.color;
      }
    });
    return colorArr[colorArr.length - 1].color;
  }
  private getColorArrary() {
    let color: any = this.color;
    let span = 100 / this.color.length;
    return color.map((c: colorArrary, i: number) =>
      typeof c === 'string' ? { color: c, progress: (i + 1) * span } : c,
    );
  }

像format、status参数参数，则是在进度条旁加上一个div。控制显示图标还是文字。content为计算属性，通过接收的format参数显示百分比或则自定义文字。

<div class="dy-progress_text">
      <template v-if="!status">{{content}}</template>
      <dy-icon v-else :icon="iconClass"></dy-icon>
    </div>

如果传入format为数值，则content可以直接返回百分比；若format传入类型为函数，则可以通过percentage自定义文字显示。

get content() {
    if (typeof this.format === 'function') {
      return this.format(this.percentage) || '';
    } else {
      return `${this.percentage}%`;
    }
  }

进度条基本功能就介绍到这啦!

2 打包组件

2.1、打包

打包组件为什么我要在说明一下呢，就是因为在这踩了个大坑啊！！！ 上一篇文章注册组件时，使用Vue.component(DyButton.name, DyButton);注册。当时打包后的文件使用的是commonjs文件作为引用的入口文件，在编写vuepress文档时，并没有多注意。因为commonjs在doc文档项目中是可以使用的(建议使用后缀名为umd.min.js的压缩文件)。

当我部署到GitHub上时，发现组件写的组件库完全失效，而且并没有报错。

当时找了很多，比如vuepress部署样式失效的问题，但是我的vuepress文档基本样式还是有效的，所有证明我的路径并没有问题。

之后怀疑vuepress引用dying-ui组件库无效，但是本地可以运行，此想法再次被推翻。

再然后，js重写dying-ui组件库，发现部署没有问题。慢慢找到根本原因：ts编写组件库，使用component.name在打包后组件名也会压缩。所以在vuepress打包后组件库也是会被打包的。因此组件的name属性无效。

解决方法：

在组件中使用static静态变量public static comName = 'DyProgress';，注册组件时使用component.comName即可。

2.2、引用入口文件

在写组件库部署失效时，一直以为是打包后入口文件有问题，因为设置main为./dist/dying-ui.umd.min.js在本地组件库运行失效。换为./dist/dying-ui.common.js本地运行就可以。 其实两者并没太大区别。umd文件是糅合了AMD和CommonJs两种规范。只是组件库使用min的话，dy-ui-doc文档项目引用的直接为组件库打包后的文件，在文档项目部署时就不需要再去压缩组件库。而直接使用umd或者commonjs文件的话，在需要引用组件库的项目打包时，需要将组件库一同压缩打包，会出现注册组件名压缩导致组件失效。

3 组件文档

组件文档我选择的时vuepress，根据官网教程，一步一步搭建文档项目即可。

像element官网中组件样式下展示组件代码，可以参照element源码中的element\examples\components\demo-block.vue文件。也可以使用dy-ui-doc项目中的模板，dy-ui-doc是将其去除在线运行功能的简化版。

组件库：dying-ui

文档：dy-ui-doc

作者：ClyingDeng

链接：https://juejin.cn/post/6901649102874869767

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。