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

在看之前，我们先来达成共识， Button 组件所接受的属性有：

文章插图

然后我就写下了这样的一段代码。

文章插图

这里有人会问了， disabled为什么出现这么多？这就是我想吐槽的地方，因为视觉和交互方面就要这样，换句话说 :

正常情况下， color 不同， disabled 之后对应的 hover、active、focus 不同。

幽灵情况下， color 不同， disabled 之后对应的 hover、active、focus 也会不同。

反白情况下， color 不同， disabled 之后对应的 hover、active、focus 也会不同。

而且最让人恶心的是， ghost、antiWhite、color 这三种，可随意搭配，也就有 8 种可能，对不起，我尿了。
这就是我一开始没定义好样式优先级的锅，自己给自己埋坑，于是代码自然而然的，哎，不提也罢。
在确认了优先级规则之后 : props style > disabled > ghost > antiWhite > color
将代码改成了这样，果然，管它什么属性、类型，一切按我的规则来！

文章插图

自然而然的， less 代码就相对好写了许多。

文章插图

文章插图

2. ButtonGroup 的坑前边也说了， ButtonGroup 只是一个包裹着 Button 的容器，它不是BaseButtonHoc 衍生出来的类型。是不是你就觉得，嗨，这不就用一个div包裹按钮组件而已吗，这有啥好纠结的，嘿，我当时也是这么认为的，知道我真的去做了之后，才发现，这他娘玩屁啊。

文章插图

当时我第一眼，没错了，按照代码来说，确实应该是这样，但这不是我想要的啊...
为什么会出现这种情况，大家想一下其实也知道，因为Button本身默认带有圆角，我只是在外部加了一个div ，所以自然就是这样咯，相比说到这里，已经有小伙伴知道如何处理了，没错，就是你想的那样，我的解决方法就是 :ButtonGroup 下把 Button 的边框和圆角强制去掉

// 组合按钮.@{button-group-prefix-cls} {// 组合下的Button边框都去掉.@{button-prefix-cls} {border: none;border-radius: 0;}}

这段代码，不会再出现上边说的实际情况了。但随之而来的，又是一个新问题，那就是，我真的想设置圆角怎么办？咦，不错，你跟我想的一样，我们把它重置了，现在再给它加回来。

.@{button-group-prefix-cls} {// 重新设置边框及圆角&-circle {.@{button-prefix-cls} {&:first-child {border-top-left-radius: @btn-border-radius;border-bottom-left-radius: @btn-border-radius;}&:last-child {border-top-right-radius: @btn-border-radius;border-bottom-right-radius: @btn-border-radius;}}}}

稳妥，想一想，还有问题吗？嘿，你还别说，还有一个大问题，那就是，我传入的 Button 有大有小咋搞！
<ButtonGroup><Button size="small">小按钮</Button><Button size="large">大按钮</Button></ButtonGroup>

文章插图

何解？我当时萌生的第一个想法，那就是 : 取得子组件中最大尺寸 size ，然后重写各Button组件的 props size ，比如上边的 demo 中，我找到最大尺寸是 large ，那么我重写每个 Button 的 size 都改为 large ，但是，被现实狠狠打了一巴掌，因为我们在 ButtonGroup 里边是一个 children 玩意。