我再也不敢说我会写前端 Button组件「实践」 _前端

前言前段时间将 antd 一些组件的源码看了一下，特别是 Button 组件的源码，我真的是跪了， what the f**k ，原来还能这么设计， less 居然还能这么用。这不，参考Antd Button源码，结合视觉交互，经过三次的设计评审，终于在今天，把 Button 组件撸出来了。下面记录一下自己的设计和开发思路~

希望大家能耐得住性子去看，因为这个 Button 组件有太多种情况了，包括在设计、开发中遇到的一些坑，当然我这个设计不一定是好的，所以也希望，大家看完之后可以给点建议，谢谢大家喏~

看完文章你会收获什么？我也不知道你能收获什么，这篇文章主要是记录我在开发一个公共组件的一些思考设计和遇到的坑，如果你也是跟我一样，想知如何写一个公共组件，或者是开发一个公共组件该做些什么准备，那么这篇文章可能会让你有一丝丝的启发~
效果担心大家一直听我逼逼，给大家一种纸上谈兵的错觉，我就先上效果图。最终的实现

ButtonIcon 和 ButtonText 未来得及开发，这两个组件问题不大

文章插图

设计思想在谈具体设计和开发之前，请允许我说几句话，个人想法: 前期的设计及评审很重要，不要盲目就下手去撸代码，也不要闭门造车，自己一个人搞，一定要在开发之前，将你能考虑到的所有情况和规则罗列出来，进行评审，组内成员提出建议并且进行查缺补漏（因为使用者就是你身边的小伙伴，相信他们会给你提很多“无理”的要求）
组件设计下面是我根据视觉小姐姐给的视觉稿，结合交互，最终将 Button 组件分为
使用场景按照使用场景， Button 组件可分为 :

普通按钮
图标按钮
文本按钮
组合按钮
幽灵按钮
反白按钮

按类型按类型划分， Button 组件可分为 :

主按钮
次按钮

按大小按大小划分， Button 组件可分为 :

小按钮
标准按钮
大按钮
拇指按钮

按主题色按主题色划分， Button 组件可分为 :

主题按钮
警示按钮
危险按钮

上边是我所能想到的所有按钮划分，划分完了之后，我们得进一步确认一些属性，这里想跟大家探讨一下两个重要的玩意：type & ghost
这里有小伙伴要懵逼了，这个属性不是很简单吗，为什么要单独拿这个属性出来讨论呢？来来来，我们讨论一下 ~
【我再也不敢说我会写前端 Button组件「实践」】且不说组内视觉给的，我们来看看业内一些优秀 UI 库，他们对 Button type 的定义
Ant Design对于 type 的定义，仅支持主按钮、次按钮、虚线按钮和链接按钮。

文章插图

在我的认知中，对于按钮的颜色说明，是这样的

蓝色，主色调，表按钮是用来说明意义。
绿色，成功色调，表按钮是成功
橙色，警示色调，表按钮是警告、提示
红色，错误色调，表按钮是错误、危险

所以对于 Antd 有一点我是比较疑惑，如果用我的这种认知去看它的Button组件，当设置 type=primary 时是蓝色，那么，自然而然的，我想要危险红色，是不是设置 type=danger 就对了呢？

? 不好意思，你想太多了

Antd单独提供了一个danger属性，用于设置该按钮为危险按钮。也就是说，这样才是对的
<Button type="primary" /> // 蓝色<Button type="primary" danger />// 红色iView我们再来看一下 iView 对于 Button type的一个定义。