根据按钮数量决定是否收集按钮

背景

一晃又到周五了，但工作热情不能少。再记录自己今天实现的小功能点吧。根据产品要求，一个组件的操作按钮少于等于二个平铺展开。多于两个收集显示菜单格式。

问题

这个小需求实现上并无难点，只要细心就可以了。由于周五也在认真搬砖，就先记录一个好被记录的吧。

方案

具体实现依然三步走。

首先区分场景，解决什么情况下平铺什么情况下收起。可根据buttons(按钮数量)，然后分别渲染上述两个情况。这里由于两个展现形式差别较大，所以这里处理是当作两个小小需求来处理，分别实现两种排版样式即可。
用css + dom画平铺样式。直接采用flex布局即可，再根据margin: 20调整两遍间距，不过多赘述。
用antd中Dropdown就可以快速实现被收集起来的样式。由于公司内使用react + antd技术栈，所以选用Dropdow。话说这也是我第一次用这个组件。

实现

具体实现的话，直接上代码，jsx文件内核心代码如下：

import { Dropdown } from 'antd';

const items = [
{
key: '1',
label: '1'
},
{
key: '2',
label: '2'
},
{
key: '3',
label: '3'
},
]

const menu = (
<Menu
items={items}
/>
);

const initBtn = () => {
return <>
<i className="iconFont-0522"></i> //此处使用了iconfont
<span>{btn.label}</span>
</>
}

const renderBtns = () => {
if (btns.length < 2) {
return <div className="btns">
{
btns.map(btn => {
initBtn(btn);
})
}
</div>
} else {
<Dropdown overlay={menu} placement="bottomLeft" arrow>
<Button>showBtnsMenu</Button>
</Dropdown>
}
}

less具体代码如下：

.btns > span {
    color: #222222;
    line-height: 20px;
    margin: 20px;
    cursor: pointer;

    i {
        width: 12px;
        height: 12px;
        margin-right: 4px;
    }
}

.container {
    display: flex;
    align-items: center;
}