「造轮子」—Xue-ui (1)

写在前面

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 事件。

    <span class="x-icon-wrapper">
        <svg class="x-icon" aria-hidden="true" @click="$emit('click',$event)">
            <use v-bind:xlink:href="`#icon-${name}`"></use>
        </svg>
    </span>

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 的设计思路。