我模仿Element Plus写了一个react组件库

一、前言

大家好，我是咕噜水蜜桃，一位前端菜鸟。

前不久，我找vue的工作屡屡受挫，已经面到我怀疑人生了，到最后我连面试官提问计算盒子的宽度时都模糊不清了，可能有后端的同学不明白前面这句话什么意思。我打个比方，就相当于，幼儿园老师问你： 1 + 1 =几啊，我思考良久，回答到：好像等于 3

可能例子有些夸张了，但也差不太多，自那次面试之后，我就一值在反思到哪里出来问题，到头来还是觉得是我个大 菜比，菜就多练吧，于是我开始一个月疯狂的学————v——react,我想看看能跟vue平起平做的大哥究竟是何方神圣！

学了一个月的成果就是 --- 如题所示，我模仿Element Plus写了一个组件库，为什么想写呢，因为 我看了linwu大佬的一篇文章作为面试官，为什么我推荐组件库作为前端面试的亮点？,给了我这个小萌新前端身感触动，于是在那时候我的心就埋下了一个种子 一定要写一个组件库。

二、核心内容

1. react组件库名称： kcode-ui

2. 官方文档：点击我 ,目前的化已经实现30+ 个组件了 ，而且我会一直持续跟新的。

3，风格：大部分组件采用的风格与Element Plus 保持一直，但也有不少的组件参考的是其他组件库。

4，github地址点击我, 文件夹： src/components 组件库，src/views为演示代码，

5，npm。

npm install kcode-ui

import{ 组件名 } from 'kcode-ui’

三、常用的开发组件库技巧

1、pointer-events:none

这个css样式能快速的帮助我们实现组件需要设置disabled的效果，不过需要在父元素加 cursor:not-allow (自身加 cursor:not-allow无效)，所有局限性就在于link ,button那样的简单的组件不太用的上。

2、箭头效果

主流的方法有2种： 1，boder 2，渐变(更优解，element箭头就是用的这效果) html样式

<div id="app"></div>

boder实现如下 线上体验

 #app{
 border-bottom: 20px solid red ;
 border-left:20px solid transparent;
 border-right:20px solid transparent;
 }

渐变实现如下 线上体验

#app{
  width: 30px;
  height: 30px;
 background: linear-gradient(45deg,red 0%, red 50%, transparent 50%,  transparent 100%);
 border-left: 2px solid blue;
 border-bottom: 2px solid blue;
 transform: rotate(135deg);
}

四、文档网站

五、总结

感谢大家能观看到文章最后，这个组件库我确实费了很多心血，如果您觉得感觉不错，可以在github上点一下收藏，这就是对我最大的鼓励了。

欢迎大家跟我一起交流学习，评论和微信我都会积极的回复的，（微信号：steamhui455)

六、地址

文档地址：1，kdaohang.top/ 2，kcode.online (这个也行，不过ssl还没未签发） github地址：(github.com/hui455/kcod…