写在前面
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 的设计思路。
