「造轮子」—Xue-ui (基础组件)

写在前面

Xue-ui 是我在学习前端过程中制作的一个 UI 组件库。目前大大小小的组件已经写了20来个，并且用写好的组件搭建了一个官网。

源码仓库
文档链接

Xue-ui 已经发布到 NPM，可以使用 NPM / YARN 来安装

$ npm install xue-ui
$ yarn add xue-ui

为什么要写这个组件库

这是学习 Vue 最好的方式。

为什么要写这篇文章

对写轮子过程中自己思路的总结。

Icon

icon 是组件库中最常用的组件。它使用起来非常方便，在 iconfont 挑选图标并拷贝代码到本地导入组件，在组件上通过设置 name 属性来选择图标。icon 组件只接受 name 这一个 props，对其样式的控制可以直接在组件标签上进行（width、height、color）。icon 组件通过自定义事件支持 click 事件。

Button

button 组件也是一个非常基础的组件，button 组件会被渲染为 button 标签，因此对其样式的控制可以非常方便的进行。当然，也可以通过 props 传入属性来使用一些已经定义好的样式。button 组件同样通过自定义事件支持 click 事件，同时被点击时会触发一个轻微的波浪效果（参考 Ant Design）。波浪效果是通过 after 伪元素和事件监听来实现的。

部分css代码

button::after {
      content: '';
      display: block;
      background: $habg;
      pointer-events: none;
      position: absolute;
      z-index: 1;
      top: -1px;
      left: -1px;
      bottom: -1px;
      right: -1px;
      border-radius: inherit;
      border: 0 solid $p;
      opacity: 0.4;
      animation: after-scale 0.5s linear forwards;
      flex-shrink: 0;
    }
@keyframes after-scale {
  to {
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
    border-width: 6px;
    opacity: 0;
  }
}

在 mounted 钩子给 button 添加事件监听

  mounted() {
    this.$el.addEventListener('animationend', this.listenAnimation)
  }

点击 button 时给 button 添加类名（变量控制），显示 after 伪元素，after 伪元素带有动画效果。动画效果结束后 listenAnimation 方法会设置变量为 false 以关掉 after 伪元素的显示。
由于添加了事件监听，因此需要在 befortDestroy 钩子中手动移除

  beforeDestroy() {
    this.$el.removeEventListener('animationend', this.listenAnimation)
  }

button 组件的 css 明显比 js 更麻烦。

Button-group

对 button 组件的一个小封装，用得不是太多。这个组件几乎都是在写 css。
多个 button 放在一起的时候，中间的 button 只在 hover 或 focus 时显示左右边框，通过设置 border-left / border-right:none 虽然可以实现，但是当左右边框出现时组件整体会出现抖动。设置 border-left / border-right 为透明色时，相邻两个 button 组件上下边框会有一个明显的断点。因此我选择了设置 border-left / border-right:none 并通过 before 伪元素来实现边框效果（after 伪元素用于实现波浪效果）。

小结

前三个轮子都非常基础，主要是在熟悉 Vue 的组件化和 UI 的设计思路。